Vue-cli 3.5.1 + Webstorm 使用手機訪問演示頁面

CrazyCodes 發布于2019-08-23 15:59 / 3306人閱讀

摘要：使用手機訪問演示頁面如果使用和創建項目。后手機不能通過網絡訪問演示頁面，原因是默認使用計算機本地連接的地址作為網絡訪問地址修改地址為要使用的無線網絡地址就可以解決問題在之前的版本中可以修改目錄內文件解決移除了文件后可嘗試如下解決辦法。

Vue-cli 3.5.1 + Webstorm 使用手機訪問演示頁面

如果使用Webstorm和Vue-cli 3.5.1創建項目。
npm run server 后手機不能通過網絡訪問演示頁面，
原因是webstorm默認使用計算機本地連接的IP地址作為網絡訪問地址,
修改IP地址為要使用的無線網絡地址就可以解決問題.
在之前的版本中可以修改config目錄內index.js文件解決.
cli3移除了config文件后:
可嘗試如下解決辦法。

根目錄下創建vue.config.js

vue.config.js是vue cli 3移除config目錄后可選的配置文件,如果創建在根目錄下會自動加載.

vue.config.js 參考文檔 : https://cli.vuejs.org/zh/conf...

模板設置

// vue.config.js 配置說明
// 這里只列一部分，具體配置參考文檔
module.exports = {
    //publicPath:用于替代原先baseUrl;
    publicPath: process.env.NODE_ENV === "production"
        ? "/production-sub-path/"
        : "/",
    // outputDir: 在npm run build 或 yarn build 時 ，生成文件的目錄名稱（要和baseUrl的生產環境路徑一致）
    outputDir: "mycli3",
    //用于放置生成的靜態資源 (js、css、img、fonts) 的；（項目打包之后，靜態資源會放在這個文件夾下）
    assetsDir: "assets",
    //指定生成的 index.html 的輸出路徑  (打包之后，改變系統默認的index.html的文件名)
    // indexPath: "myIndex.html",
    //默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。你可以通過將這個選項設為 false 來關閉文件名哈希。(false的時候就是讓原來的文件名不改變)
    filenameHashing: false,

    //   lintOnSave：{ type:Boolean default:true } 問你是否使用eslint
    lintOnSave: true,
    //如果你想要在生產構建時禁用 eslint-loader，你可以用如下配置
    // lintOnSave: process.env.NODE_ENV !== "production",

    //是否使用包含運行時編譯器的 Vue 構建版本。設置為 true 后你就可以在 Vue 組件中使用 template 選項了，但是這會讓你的應用額外增加 10kb 左右。(默認false)
    // runtimeCompiler: false,

    /**
     * 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。
     *  打包之后發現map文件過大，項目文件體積很大，設置為false就可以不輸出map文件
     *  map文件的作用在于：項目打包后，代碼都是經過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法準確得知是哪里的代碼報錯。
     *  有了map就可以像未加密的代碼一樣，準確的輸出是哪一行哪一列有錯。
     * */
    productionSourceMap: false,

    // 它支持webPack-dev-server的所有選項
    devServer: {
        host: "192.168.31.23",
        port: 8080, // 端口號
        https: false, // https:{type:Boolean}
        open: false, //配置自動啟動瀏覽器
        // proxy: "http://localhost:4000" // 配置跨域處理,只有一個代理

        // 配置多個代理
        proxy: {
            "/api": {
                target: "",
                ws: true,
                changeOrigin: true
            },
            "/foo": {
                target: ""
            }
        }
    }
};

修改設置

將模板設置內的devserver部分內的host修改為你要使用的網絡IP地址.
將port修改為要使用的端口號,
重新npm run server即可.

獲取IP地址不建議使用ipconfig命令獲取,建議直接點擊網絡圖標查看屬性內的IP地址.

GPU云服務器云服務器 docker應用使用演示 webstorm node js webstorm vue-cli

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102608.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
移動端真機調試實戰經驗

摘要：我個人比較推薦的方法是或者安卓手機的這種方式，比較簡單方便快捷，然后根據具體的環境再選擇更為合適的調試方法。本文首次發表于本人的個人博客：http://cherryblog.site/ ，歡迎大家到我的博客查看更多文章~ 前言在開發中前端免不了要進行移動端的開發，然而在電腦上看的樣式和手機上還是有一定的差距的，因為手機上有頂部的狀態欄和底部的菜單欄，特別是在qq內置瀏覽器中打開，差...

rainyang 2019-08-20 16:21 評論0 收藏0