Vue 热更新成功,但浏览器不刷新

最近在更新个人主页,这个主题看够了,就想换另一个。但是今天突然发现我的 Vue 不能热更新?费了一会劲才搞明白怎么回事。下面就分享一下我的入坑,出坑过程吧。

webpack-dev-server 炸了?

一开始我还真的以为是 HMR 不工作了,所以这里陷入了一个大坑,这里省略 1 个小时的搜索。。。

后面细心我的发现改了代码后,命令行是有显示在编译的。

嗯。。。说明热更新是没问题,可能是更新,但是更新到浏览器这一步不行了,或者说 webpack-dev-server 没有真正地通知到浏览器,所以没有刷新。

然后又搜了一波“Vue 浏览器无法正常刷新”,这里省略1小时的纠结。。。

sockjs-node

后面无聊点开了 Network 看到下面的报错:

好奇点开这个请求详情:

这里我关注了到了 Request URL: http://172.20.10.2:8080/sockjs-node/info?t=1590456177387。这里有 "sockjs" 字眼,嗯,sock?socket !!!!(此时应该有BGM)

我可以合理地提出自己的一个猜想:webpack-dev-server 和浏览器应该是一个双工的过程。因为第一次连接没有连接上,浏览器就根本没有在监听 webpack-dev-server,所以代码改了,浏览器并没不知道!

为了验证我的猜想,我查了下这个请求,发现了 sockjs-node 这个库,https://github.com/sockjs/sockjs-node,果然是一个 websocket 的东西。同时,我还查了很多中文的垃圾博客,为什么要说垃圾,因为抄袭。

回到问题本身,根据上面的这些博客,可以知道 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,到此为止,其实已经有两种解决方法了:

  1. 把当前 IP 加到 VPN 的 exclude list
  2. 每次项目重启的时候,把 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 访问的就是本机了。

另一篇 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 也是可以成功建立的。

但是,这里也有不好的地方,它改了 Network。你可能会问,改了 Network 怎么了?先看看原来是怎么样的:

一个是本地的地址,一个是公开的地址,有了公开的地址就可以在手机里调试呀。不然每次都要 ifconfig 去找本机的 IP,好麻烦。而且别人看到你提交的代码可能会过来找你。

总强

总结一下,问题其实就是因为开了代理,代理以为你的局域网地址是 public address,所以并不能得到响应。因此 webpack-dev-server 和浏览器的双工通信没有成功连接,浏览器就无法监听到 webpack-dev-server 的热更新。最后浏览器就变成了憨憨。

解决方法有下面几种:

  1. 每次开 Vue 项目时候,先关了 VPN。等项目启动了再开 VPN,因为双工通信只要第一次连接好了,后面就能正常通信了,VPN 再也不会捣乱。缺点是不能刷新,一刷新又会发 Request了。
  2. 把当前 IP 地址加到 VPN 的 exclude list。这样就还是会访问局域地址,不会以为它是 public addresss。
  3. 修改请求的 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
  }
}

推荐阅读更多精彩内容