解决Vue热更新失效问题

解决Vue热更新失效

    • 一、问题描述
    • 二、出现原因
    • 三、解决方案
    • 四、总结

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

一、问题描述

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

在这里插入图片描述

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

解决Vue热更新失效问题_第1张图片
说明:这个文件可以在 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发送请求,从而导致热更新失败。如下图所示:
    解决Vue热更新失效问题_第2张图片
  • sockjs-node发送请求的作用就是实现Vue的实时更新,如果开发中发现实时更新失败,可以考虑先来这里看看是否出现问题

你可能感兴趣的:(前端,vue.js,javascript,前端)