Blog - wingsico

使用开发模式启动项目后,在同一局域网通过手机连接项目,在一些手机厂商自带浏览器上产生空白页面,渲染失败。

问题分解

npm run dev

在vue-cli中,这可能是我们用的最频繁的命令了,来看一下package.json 里:

1
2
3
4
5
6
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},

主要看 dev 这个属性的值:

1
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

来解读一下这一行命令

webpack-dev-server

找到 node_modules 目录下的 webpack-dev-server,看它的readme 中可以得到以下信息:

1
2
3
Either method will start a server instance and begin listening for connections from `localhost` on port `8080`.

webpack-dev-server is configured by default to support live-reload of files as you edit your assets while the server is running.

意思是,输入命令 webpack-dev-server 就会在 8080 端口启动一个本地服务器,支持热重载,也就是你修改了静态文件内容无需刷新,页面直接更新的意思。

那后面那些参数什么意思呢?

首先是 --inline,这是支持自动刷新的一种模式,还有另一种是--iframe

iframe 模式下:页面是嵌套在一个 iframe 下的,在代码发生改动的时候,这个 iframe 会重新加载;

在inline模式下:一个小型的 webpack-dev-server 客户端会作为入口文件打包,这个客户端会在后端代码改变的时候刷新页面。

不过 Iframe modeInline mode 最后达到的效果都是一样的,都是监听文件的变化,然后再将编译后的文件推送到前端,完成页面的 reload 的。

对于 --process,是用于显示打包的进度,如果我们去掉它,或者换成 --quiet,就不会出现那些百分比的东西。

最后 --configconfig 后面跟着一串路径,指定的是webpack配置文件的路径。

ok,介绍完了,进入今天的正题

调试

执行 npm run dev 之后,pc端正常访问,手机局域网访问一片空白,无法正常访问,但是build之后可以正常访问,于是开启了qq浏览器的调试,发现有这样一个报错:

1
SyntaxError: Use of const in strict mode

发现是es6的语法不兼容,但一想到 dev 和 pro 模式的不同表现,那应该是就 babel 在 dev 与 pro 之间的配置不同。

解决方案

进入 webpack.base.conf.js 里面,找到

1
2
3
4
5
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},

将其改成

1
2
3
4
5
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},

再将.babelrc添加一行:

1
["es2015", {"modules": false}],

重新启动npm run dev 再用手机访问,OK,成功了。

 评论