Vue 热更新成功，但浏览器不刷新【转载】

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

webpack-dev-server 炸了？

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

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

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

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

后面无聊点开了 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服务器之间通信通道。 —— 来自各种抄袭博客

那问题就变简单了，只要搞清楚为什么不能响应这个请求就好了。

因为在查资料和尝试各路方法的时候，我总会不断重启我的 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 连接成功后，后面就可以正常通信了。不过，刷新就不行了，因为每次刷新又得创建连接。

仔细想想，问题不就是因为他用了 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 的热更新。最后浏览器就变成了憨憨。

解决方法有下面几种：

每次开 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
  }
}
```

posted @ 2022-11-15 13:30 ysx_小鱼阅读(634) 评论(0) 编辑收藏举报

刷新页面返回顶部