Vue 热更新成功,但浏览器不刷新【转载】
最近在更新个人主页,这个主题看够了,就想换另一个。但是今天突然发现我的 Vue 不能热更新?费了一会劲才搞明白怎么回事。下面就分享一下我的入坑,出坑过程吧。
webpack-dev-server 炸了?
一开始我还真的以为是 HMR 不工作了,所以这里陷入了一个大坑,这里省略 1 个小时的搜索。。。
后面细心我的发现改了代码后,命令行是有显示在编译的。
![](http://upload-images.jianshu.io/upload_images/2979799-511444bc77a14a95.png?imageMogr2/auto-orient/strip|imageView2/2/w/1060/format/webp)
嗯。。。说明热更新是没问题,可能是更新,但是更新到浏览器这一步不行了,或者说 webpack-dev-server 没有真正地通知到浏览器,所以没有刷新。
然后又搜了一波“Vue 浏览器无法正常刷新”,这里省略1小时的纠结。。。
sockjs-node
后面无聊点开了 Network 看到下面的报错:
![](http://upload-images.jianshu.io/upload_images/2979799-cec1c54ea7e5c77b.png?imageMogr2/auto-orient/strip|imageView2/2/w/346/format/webp)
好奇点开这个请求详情:
![](http://upload-images.jianshu.io/upload_images/2979799-fcd04f1875cbf1cc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
这里我关注了到了 Request URL: http://172.20.10.2:8080/sockjs-node/info?t=1590456177387。这里有 "sockjs" 字眼,嗯,sock?socket !!!!(此时应该有BGM)
![](http://upload-images.jianshu.io/upload_images/2979799-6594b54e5dcc2a88.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/267/format/webp)
我可以合理地提出自己的一个猜想:webpack-dev-server 和浏览器应该是一个双工的过程。因为第一次连接没有连接上,浏览器就根本没有在监听 webpack-dev-server,所以代码改了,浏览器并没不知道!
为了验证我的猜想,我查了下这个请求,发现了 sockjs-node 这个库,https://github.com/sockjs/sockjs-node,果然是一个 websocket 的东西。同时,我还查了很多中文的垃圾博客,为什么要说垃圾,因为抄袭。
![](http://upload-images.jianshu.io/upload_images/2979799-1658e78d566ac8a7.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
回到问题本身,根据上面的这些博客,可以知道 sockjs-node 是一个:
首先,sockjs-node是何方神圣?不难查出,sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 —— 来自各种抄袭博客
那问题就变简单了,只要搞清楚为什么不能响应这个请求就好了。
都是 VPN 的锅
因为在查资料和尝试各路方法的时候,我总会不断重启我的 Vue 项目。然后有一次,浏览器竟然可以自动刷新了。此时的我还清楚地记得我在重启前把 VPN 关了,因为之前要装个 npm 包。
然后我尝试了几次,只要开 VPN 就炸,关了 VPN 就成功了。所以这次我搜索的内容变成了 “Vue 热更新 VPN”,搜了几次发现了这篇文章:https://blog.csdn.net/gulang03/article/details/89217273
里面遇到的就是我的问题,这里总结一下,因为这个 Request 的地址是局域网的地址,而我用了 VPN 代理,它就会当成是 public address 去请求。一个是局域的,一个 public address ,那肯定是无法响应的嘛。
OK,到此为止,其实已经有两种解决方法了:
- 把当前 IP 加到 VPN 的 exclude list
- 每次项目重启的时候,把 VPN 关了。之后是可以再次打开的,因为只要第一次 websocket 连接成功后,后面就可以正常通信了。不过,刷新就不行了,因为每次刷新又得创建连接。
修改 host
仔细想想,问题不就是因为他用了 public address 所以无法建立连接么?那为什么不直接把 http://172.20.10.2:8080/sockjs-node/info?t=1590456177387
改成 http://localhost:8080/sockjs-node/info?t=1590456177387。别用 172.20.10.2,用 localhost 呗,这肯定是能访问到本机的呀。
所以我又开始搜索 “Vue How to change sockjs-node host”,搜出了两遍比较好的 Github Issue。
第一篇 https://github.com/gtalarico/django-vue-template/issues/5 和我的问题有的类似,也是上面这个请求无法访问了。不过他好像是 Django 的问题。但是上面给的方法是可以解决的。
在 package.json 改成 "server": "vue-cli-service serve --host 127.0.0.1 --port 8080"
。这样 host 就是 127.0.0.0 访问的就是本机了。
![](http://upload-images.jianshu.io/upload_images/2979799-bbc57cf3511d91cd.png?imageMogr2/auto-orient/strip|imageView2/2/w/840/format/webp)
另一篇 https://github.com/vuejs/vue-cli/issues/1525 说的就是 Vue 这个 cli 的 websocket 就是连不上,怎么修改 Host 的。这里的解决方法也差不多。
在 vue.config.js 里添加 devServer 的配置:
module.exports = {
...
devServer: {
host: '0.0.0.0',
public: '0.0.0.0:8080',
disableHostCheck: true
}
}
这样访问的还是本机,websocket 也是可以成功建立的。
![](http://upload-images.jianshu.io/upload_images/2979799-f96fcf8b43eff320.png?imageMogr2/auto-orient/strip|imageView2/2/w/848/format/webp)
但是,这里也有不好的地方,它改了 Network。你可能会问,改了 Network 怎么了?先看看原来是怎么样的:
![](http://upload-images.jianshu.io/upload_images/2979799-5a3e41d40f3d2674.png?imageMogr2/auto-orient/strip|imageView2/2/w/830/format/webp)
一个是本地的地址,一个是公开的地址,有了公开的地址就可以在手机里调试呀。不然每次都要 ifconfig
去找本机的 IP,好麻烦。而且别人看到你提交的代码可能会过来找你。
总强
总结一下,问题其实就是因为开了代理,代理以为你的局域网地址是 public address,所以并不能得到响应。因此 webpack-dev-server 和浏览器的双工通信没有成功连接,浏览器就无法监听到 webpack-dev-server 的热更新。最后浏览器就变成了憨憨。
解决方法有下面几种:
- 每次开 Vue 项目时候,先关了 VPN。等项目启动了再开 VPN,因为双工通信只要第一次连接好了,后面就能正常通信了,VPN 再也不会捣乱。缺点是不能刷新,一刷新又会发 Request了。
- 把当前 IP 地址加到 VPN 的 exclude list。这样就还是会访问局域地址,不会以为它是 public addresss。
- 修改请求的 Host:
3.1 可以在 package.json 里改成"server": "vue-cli-service serve --host 127.0.0.1 --port 8080"
。
3.2 或者在 vue.config.js 里添加module.exports = { ... devServer: { host: '0.0.0.0', public: '0.0.0.0:8080', disableHostCheck: true } }