vue热更新无法关闭_vue-cli3热更新失效

vue-cli3热更新失效问题

公司的一个使用vue-cli3搭建的项目一直无法热更新,每次保存代码后都需要手动刷新页面才能看到修改之后的页面,作为一个强迫症晚期患者,那肯定是忍不了。经过个人研究学习,修复好了项目热更新问题,因此写下博客分享给各位。

内容都是本人看文档查资料后自己理解的,难免有理解不到位的地方,也欢迎大家指出错误之处,一起学习共同进步。

项目开发环境背景

我司项目由于相关原因需要前端开发的时候使用nginx代理,例如项目启动后为http://localhost:8080,配置nginx后前端访问https://www.xxx.com

排查步骤

sockjs-client

应该有不少使用vue脚手架创建项目的小伙伴都遇到过这么一个问题,/sockjs-node/info?t=在浏览器控制台一直报错。在百度之后大家的解答出人意料的一致:

注释掉/node_modules/sockjs-client/dist/sockjs.js这个文件第1605行的self.xhr.send(payload)

事实上我司项目中也是这么处理的,那会不会是sockjs-client导致的热更新失效呢?

答案是:是的。

在将源码注释去掉后,经过测试发现:

访问localhost:8080不会报错,访问代理地址http://www.xxx.com也不会报错,

而访问代理地址https://www.xxx.com就会开始报错。

而且对比浏览器network中报错请求的地址可以发现:

前端页面地址为localhost:8080或http://www.xxx.com时sockjs请求的地址是http://xxxxx(本机ip地址),

页面地址为https://www.xxx.com时sockjs请求的地址是https://xxxxx(本机ip地址)。

devServer.public

查阅webpack文档,发现这个配置项:

文档上说明,如果开发服务器被nginx代理,则可配置该项。那就加上试一下

// vue.config.js

devServer: {

public: 'www.xxx.com:443',

}

重启项目,类似/sockjs-node/info?t=格式的报错没有了,但出现了新的错误:

WebSocket connection to 'wss://www.xxx.com/sockjs-node/244/gymxpeaf/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

nginx

在github上找到是nginx配置问题,添加如下配置:

# nginx.conf

location / {

proxy_pass http://localhost:8080;

# 以下是新增配置

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection "upgrade";

proxy_set_header Host $host;

}

至此,热更新问题解决。

其他

vue.config.js中的css配置项

在开发环境需要关闭css分离

// 是否为生产环境

const isProduction = process.env.NODE_ENV === 'production'

module.exports = {

css: {

// 是否开启css分离 在开发环境开启会导致热更新异常

extract: isProduction,

// 在浏览器审查时是否显示当前css文件路径 开发环境建议开启 不影响热更新

sourceMap: true,

},

// 生产环境是否生成sourceMap文件

productionSourceMap: false,

...

}

本人在错误排查过程中也试过这两个配置项,没有效果;在查阅资料过程中部分开发者表示用了这个有效。

同类型问题解答

总结

以上就是本次解决项目热更新问题的全过程,很多地方本人还是一知半解,只是把结果搞出来了。文章中有任何问题也欢迎留言讨论 :)

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

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

相关文章

职高计算机选修6知识点,(计算机基础考试7.doc

试卷编号:9619所属语言:计算机基础试卷方案:WINhy试卷总分:100分共有题型:4种一、单选 共40题 (共计40分)第1题 (1.0分) 题号:5923 难度:中 第81章一个六位的二进制数,如果其最高位和最低位都为1,则在下列十进制数中,可…

python中importlib模块安装_Python中标准模块importlib详解

Python中标准模块importlib详解 模块简介 Python提供了importlib包作为标准库的一部分。目的就是提供Python中import语句的实现(以及__import__函数)。另外,importlib允许程序员创建他们自定义的对象,可用于引入过程(也…

HiveQL:查询

文章目录1. select from1.1 正则表达式指定列1.2 使用列值计算1.3 使用函数1.4 limit 限制返回行数1.5 别名 as name1.6 case when then 语句2. where 语句3. JOIN 优化4. 抽样查询5. union all学自《hive编程指南》 1. select from hive (default)> create table employe…

unity鼠标控制镜头旋转_Unity Camera教程之 摄像机跟随鼠标移动而旋转

FollowMouseMove 脚本具体内容如下:using UnityEngine;public class FollowMouseMove : MonoBehaviour {public float moveSpeed 5.0f;// Use this for initializationvoid Start(){}// Update is called once per framevoid Update(){// 获得鼠标当前位置的X和Yfl…

html里span和div,HTML div和span

块代码和1...ccwTest {font-family: .PingFang SC;">;color:white;margin:18px;padding:16px;}这些是文字这里是内容,改变这些文字的颜色或者是改变其他属性需要写在style里 ccwTest是名字,相当于ios中的对象名 通过这个对象名找到是调用的哪个方法2..span.red {color:…

python闭包详解函数_详解python函数的闭包问题(内部函数与外部函数详述)

python函数的闭包问题(内嵌函数) >>> def func1(): ... print (func1 running...) ... def func2(): ... print (func2 running...) ... func2() ... >>> func1() func1 running... func2 running... 内部函数func2作用域都在外部函数…

实现一个简单的web服务器

代码:http://www.oschina.net/code/snippet_991746_45911转载于:https://www.cnblogs.com/lit10050528/p/4282771.html

python format 冒号_python之格式化输出

字符串格式化有两种方式,%和format先介绍下%号的方法#%s的语法结构,叫做占位符,就是先占一个位置,然后我们用真实的要显示的数据替换占位符即可#最简单的用法就是下面的方式,其实%s还有其他的功能# s 我的名字是%s,我…

Scala 入门1(变量、分支循环、函数)

文章目录1. var 变量,val常量2. 分支、循环3. 函数、方法4. 闭包学自 https://www.runoob.com/scala/scala-tutorial.html 1. var 变量,val常量 scala 语句 用 ; 或者 \n 分句 object HelloWorld { // 类名跟文件名一致def main(args: Array[String])…

2018qs计算机科学专业,2018QS世界大学计算机科学专业排名.docx

2018QS世界大学计算机科学专业排名在2018世界大学计算机科学与信息系统排名中,牛津大学位列第一,哈佛大学和剑桥大学紧随其后。本排名中,共有2所中国大学进入Top50,北京大学位列第17位,清华大学列 20 位,跟…

http://www.cnblogs.com/langjt/p/4281477.html

http://www.cnblogs.com/langjt/p/4281477.html转载于:https://www.cnblogs.com/outlooking/p/4283320.html

nineoldandroid使用_nineoldandroid 详细使用并且实现drawerlayout侧滑动画

nineoldandroid.view.ViewHelpe是一个为了兼容3.0以下的一个动画开源库相关函数解读:(第一个参数都为动画对象,第二个为动画属性值的变化表达式)ViewHelper.setTranslationX(,);//x方向平移ViewHelper.setTranslationY(,);ViewHelper.setScaleX(,);x方向…

maven deploy plugin_Maven快速上手

作者:u_7deeb657158f出自:ITPUB博客原文:blog.itpub.net/69956102/viewspace-2726121/创建项目首先需要创建一个用于存储项目的文件夹,在控制台中输入以下命令:mvn archetype:generate -DgroupIdcom.mycompany.app -Da…

计算机应用基础形考作业3Excel部分,计算机应用基础形考3,Excel部分

“计算机应用基础”形考作业 3(Excel部分)可根据所学知识模块,在下列Excel、PowerPoint或Access中选做一个,我选了Excel (本次作业覆盖“模块 3 Excel 2010 电子表格系统”的内容,请在学完模块3后完成本次作业,要求第17周内完成。…

.net string format

转自:http://www.cnblogs.com/jobs2/p/3948049.html 转自:http://jingyan.baidu.com/article/48206aeaf8c52f216ad6b300.html 1、格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元&#xff0…

Scala 入门2(数组、List、Set、Map、元组、Option、Iterator)

文章目录1. 数组2. List3. Set4. Map5. 元组6. Option7. 迭代器学自 https://www.runoob.com/scala/scala-tutorial.html 1. 数组 使用 () 来取索引处的元素 // 数组var z1 : Array[String] new Array[String](3)var z2 new Array[String](3) // 两种方式定义z1(0) "…

python实现非对称加密算法_Python3非对称加密算法RSA实例详解

本文实例讲述了Python3非对称加密算法RSA。分享给大家供大家参考,具体如下:python3 可以使用 Crypto.PublicKey.RSA 和 rsa 生成公钥、私钥。其中 python3.6 Crypto 库的安装方式请参考前面一篇《Python3对称加密算法AES、DES3》rsa 加解密的库使用 pip3…

python画饼图_百度飞桨PaddlePaddle之[Python小白逆袭大神]7天训练营

第三次参加百度的7天训练营了这次参加的主题是【Python小白逆袭大神】,不过你别看是小白逆势。。。除非你一开始参加就逆袭完,不然你真的是python小白,这个课程还是有难难度的。说一下个训练营的特点版。这个营从python一些基础练习-->数据…

潍坊学院的计算机类怎么样,潍坊学院教育技术学专业怎么样?有知道的麻烦说下,谢谢!...

潍坊学院教育技术学专业怎么样?有知道的麻烦说下,谢谢!以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!潍坊学院教育技术学专业怎么样?有知道的…

elasticsearch配置文件详解

elasticsearch的config文件夹里面有两个配置文件:elasticsearch.yml和logging.yml,第一个是es的基本配置文件,第二个是日志配置文件,es也是使用log4j来记录日志的,所以logging.yml里的设置按普通log4j配置文件来设置就…