解决Vue热更新失效问题

欢迎访问我的个人博客：https://wk-blog.vip

一、问题描述

之前在本地测试Vue项目时，是可以热更新的，但是最近一段时间发现Vue的热更新失效了。然后通过vs code查看控制台，发现编译没有报错，然后查看浏览器控制台，发现控制台输出了一个报错，如下图所示：

然后点进去发现是这里报的错误，如图所示：

说明：这个文件可以在 node_modules\sockjs-client\dist\sockjs.js 中找到

二、出现原因

关于这个报错在网上查到的解释是：sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。在项目运行以后，network会一直调用这个接口。如果没有使用，那么就一直会报这个异常。

经过排查我这里出现这个异常是因为在Vue的index.html中加入了一个http升级为https的属性，如图所示：

因为在生产环境使用的是https协议，所以为了使所有 http 连接升级为 https 连接。就在index.html加入了这个，但是因为本地测试使用的是http协议所以就导致无法使用sockjs-node去发送请求来进行实时更新。

三、解决方案

所以最终的解决方案是，在本地测试时将这个http升级https属性属性注释掉，发布到生产环境时再将其打开。

四、总结

• 首先去查看是否是因为自己的代码和配置出现了错误，从而导致热更新失效。
• 如果自己的代码和配置都没有问题，那就有可能是你的某个配置或属性影响了sockjs-node发送请求，从而导致热更新失败。如下图所示：
  
• sockjs-node发送请求的作用就是实现Vue的实时更新，如果开发中发现实时更新失败，可以考虑先来这里看看是否出现问题