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: "<url>",
                ws: true,
                changeOrigin: true
            },
            "/foo": {
                target: "<other_url>"
            }
        }
    }
};

修正设置

将模板设置内的devserver部份内的host修正为你要运用的收集IP地点.
将port修正为要运用的端口号,
从新npm run server即可.

猎取IP地点不发起运用ipconfig敕令猎取,发起直接点击收集图标检察属性内的IP地点.