解决Vue热更新失效问题

news2024/11/23 20:16:28

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/448509.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【大厂直通车】美团_测开面经

哈喽,大家好,我是小浪;那么最近暑假实习,日常实习是卷的飞起,无论是开发岗,测试岗,算法岗,都一片死寂;不过还是有很多大佬,成功绞杀很多大厂,offer也是拿到手软; 团子暑期实习offer: 📱本专栏致力于持续更新最新各大厂面经,实习消息,招聘要求; 那么目前价格…

ISCSI个人理解与简要说明

ISCSI个人理解与简要说明 一、如何理解ISCSI二、iscsi 命令iscsiadm(管理客户端)tgtadm(管理服务端) 三、ISCSI中的概念四、从DAS,NAS,SAN的角度扩展理解ISCSI 一、如何理解ISCSI 理解一个东西&#xff0c…

Niginx的rewrite

常用的Nginx正则表达式 ^匹配输入字符串的起始位置 $匹配输入字符串的结束位置 *匹配前面的字符零次或多次。如“ol*" 能匹配"o”及“ol”、“oll” 匹配前面的字符一次或多次。如“ol" 能匹配“ol"及“ol1”、“olll", 但不能匹配“o” ?…

服务器版本的表白墙

目录 1.步骤 2.提供两个接口: 3.流程 4.代码 1.前端代码 2.sql创建表 3.后端代码 MessageServlet.java DBUtil.java 1.步骤 1.约定前后端交互的接口 2.开发服务器代码 a.编写servlet处理前端发来的请求 b.编写数据库代码,存储获取关键的数据 3.开发客户端代码 a.基于…

java学习中遇到的问题及解答

你好,我想问一下,为什么在idea编译环境下,有异常的地方它会报错,让你主动添加抛出错误代码呢? 在Java中,有两种类型的异常,一种是受检异常(checked exception)&#xff0…

一级结构规范 合集

极限状态设计原则4.1限态4.11 极限状态可分为承载能力极限状态、正常使用极限状态和耐久性极限状态。极限状态应符合下列规定:1当结构或结构构件出现下列状态之一时,应认定为超过了承载能力极限状态;1) 结构构件或连接因超过材料强度而破坏,或因过度变形…

安捷伦E4433B信号发生器

E4433B Agilent E4433B ESG-D系列 4G信号发生器安捷伦250kHz-4GHz 品  牌: Agilent 简单介绍 频率范围: E4430B 250K-1GHz E4431B 250K-2GHz E4432B 250K-3GHz E4433B 250K-4GHz 18320918653 供单信道和多信道CDMA用的测量卡用于I和Q的20 MH…

第六章 建造者模式

文章目录 前言一、传统方式解决盖房子需求完整代码抽象房子类 AbstractHouse实现子类 普通房子实现子类 高楼大厦客户端盖房子 二、引入建造者模式建造者模式的四个角色: 产品、抽象建造者、具体建造者、指挥者完整代码House类 (产品角色)抽象父类(抽象建…

Node内置模块 【Event事件模块】

文章目录 🌟前言🌟Event事件模块🌟EventEmitter类🌟加载events模块🌟实例化eventEmitter对象 🌟事件方法列表🌟使用事件🌟异步与同步 🌟写在最后 🌟前言 哈喽…

ZLMeidiaKit实现推流时(FFmpeg推rtmp流)时非127.0.0.1被拒绝需要鉴权的解决方式

场景 开源流媒体服务器ZLMediaKit在Windows上运行、配置、按需拉流拉取摄像头rtsp视频流)并使用http-flv网页播放: 开源流媒体服务器ZLMediaKit在Windows上运行、配置、按需拉流拉取摄像头rtsp视频流)并使用http-flv网页播放_霸道流氓气质的博客-CSDN博客 在上面搭建ZLMedia…

CE作业(3)

1.基于域名[www.openlab.com](http://www.openlab.com)可以访问网站内容为 welcome to openlab!!! ​ 2.给该公司创建三个子界面分别显示学生信息,教学资料和缴费网站,基于[www.openlab.com/student](http://www.openlab.com/student) 网站访问学生信息&…

windows和linux上证书的增删查

文章目录 引言windows上对个人证书的增删查创建证书证书的查找证书的删除证书的安装 Linux上对个人证书的增删查创建证书证书的安装证书的查看证书的删除 Linux上对系统证书的增删查 引言 PS: 我之前看过《图解密码技术》,已经对证书这些概念有基本的了解&#xff…

Docker容器---dockerfile简介

Docker容器---dockerfile简介 一、dockerfile概念1、dockerfile介绍2、基于dockerfile创建3、docker镜像加载原理 二、镜像的创建1、基于现有镜像创建2、基于本地模板创建3、基于dockerfile创建 三、Dockerfile编写1、dockerfile操作指令(1)FROM 镜像&am…

9. 自注意力机制(Self-attention Part2)

P27 自注意力机制(Self-attention Part2) 视频链接 P27 自注意力机制(Self-attention Part2) 计算流程: Multi-head: 应用:

数据结构入门篇:第一篇

数据结构入门篇:第一篇 时间复杂度 数据结构入门篇:第一篇1.时间复杂度2.时间复杂度的练习总结 🤔首先,为什么要学数据结构? 数据结构的概念:在内存中对数据进行管理; 数据结构的学习能让我们在…

C#生成单色bmp图片,转为单色bmp图片 任意语言完全用字节拼一张单色图,LCD取模 其它格式图片转为单色图

最终效果: V1.8.2 20230419 文字生成单色BMP图片4.exe 默认1280*720 如果显示不全,请把宽和高加大 字体加大。 首先,用windows画板生成一张1*1白色单色图作为标准,数据如下: 数据解析参考:BMP图像文件完…

【K8S系列】深入解析StatefulSet(二)

序言 那些看似不起波澜的日复一日,一定会在某一天让你看见坚持的意义。 文章标记颜色说明: 黄色:重要标题红色:用来标记结论绿色:用来标记一级论点蓝色:用来标记二级论点 Kubernetes (k8s) 是一个容器编排平…

用梯度下降的方式来拟合曲线

文章目录 1. 简述2. 理论原理以二次函数为例整体的梯度下降步骤: 3. 编码实现初始化权重矩阵计算损失和梯度更新权重 4. 结果首先对上一篇文章中的真实数据拟合。测试拟合高次曲线方程数据是2阶的,拟合方程是2阶的数据是4阶的,拟合方程也是4阶…

3年自动化测试(心路历程),从月薪10k到30k我经历了什么?

前言 2018年的时候,由于项目的原因,开始使用Robot Framework测试框架,正因为有Python的基础所以很快就理解了Robot Framework框架的工作原理,并可以根据项目的需要开发系统关键字。2019年随着移动App越来越流行,乘着换…

HTML5超链接和图片基础用法

一、HTML5 超链接(链接) 超链接可以是一个文本,也可以是一幅图像,您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。 1.我…