解决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的实时更新,如果开发中发现实时更新失败,可以考虑先来这里看看是否出现问题