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,
...
}
本人在错误排查过程中也试过这两个配置项,没有效果;在查阅资料过程中部分开发者表示用了这个有效。
同类型问题解答
总结
以上就是本次解决项目热更新问题的全过程,很多地方本人还是一知半解,只是把结果搞出来了。文章中有任何问题也欢迎留言讨论 :)
vue热更新失效_vue-cli3热更新失效相关推荐
- vue init webpack缺少标识符_Vue脚手架热更新技术探秘
前言 热替换(Hot Module Replacement)或热重载(Hot Reload)是指在不停机状态下,实时更新,在前端利于来说,在各大框架中及库中都有体现,比如NG从5开始就提供了热更新,R ...
- war包热更新_基于IDEA热部署更新服务器Tomcat类,服务器Tomcat热更新
前言 在开发过程中,如果我们是使用的IDEA,就会知道IDEA有一个热更新的功能,何为热更新?就是在不重启Tomcat的情况下让服务器中的代码变更为最新的.这样既能快速的更新代码,又不用担心Tomca ...
- springboot基于Elasticsearch6.x版本进行ES同义词、停用词(停止词)插件配置,远程词典热加载及数据库词典热加载总结,es停用词热更新,es同义词热更新
前言:ES版本差异较大,建议跨版本的同学,可以先了解一下版本区别,建议不要跨版本使用插件或者进行项目调试. 本总结主要基于6.x版本的6.5.1(6.2.2实测可用),分词器为IK,下载地址:http ...
- python flask热更新_客户端python热更新
介绍: 热更新,就是在维持服务不间断的情况下,对软件代码逻辑或配置数据进行更新修复.随着游戏项目引入了脚本语言以后,热更新技术逐渐成为了标配,在我经历过的游戏项目中,无论是服务端还是客户端,版本的更新 ...
- Android热更新初探,Bugly热更新的集成和使用(让你的应用轻松具备热更新能力)
介绍 在介绍Bugly之前,需要先向大家简单介绍下一些热更新的相关内容.当前市面的热补丁方案有很多,其中比较出名的有阿里的AndFix.美团的Robust以及QZone的超级补丁方案.但它们都存在 ...
- Android热更新五:四大热修复方案对比分析
很早之前就想深入的研究和学习一下热修复,由于时间的原因一直拖着,现在才执笔弄起来. Android而更新系列: Android热更新一:JAVA的类加载机制 Android热更新二:理解Java反射 ...
- webpack (九) -热更新——浏览器不刷新,更新打包后的结果
17-webpack-热更新--浏览器不刷新,更新打包后的结果 实现浏览器不刷新,更新打包后的结果,默认对js不生效,对样式生效. https://www.webpackjs.com/guides/h ...
- 视频教程-热更新框架设计之热更流程与热补丁视频课程-Unity3D
热更新框架设计之热更流程与热补丁视频课程 二十多年的软件开发与教学经验IT技术布道者,资深软件工程师.具备深厚编程语言经验,在国内上市企业做项目经理.研发经理,熟悉企业大型软件运作管理过程.软件架构设 ...
- Android 版本更新(非热更新) 适配7.0更新 以及三星 note系列读取内存相关目录无权限问题
目录 [TOC] 个人认为热更新虽然是好 但是 像ios直接拒绝使用热更新 也不无道理 本人一直使用传统的版本升级方式 请求接口 返回下载链接 然后下载文件 用Intent吊起安装 android7. ...
- vue表格刷新数据_Vue.js+Layer表格数据绑定与实现更新的实例
一:先使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据 选择 用户名 学号 班级 操作 {{item.User ...
最新文章
- ipvsadm的几个参数输出的说明
- Unicode,UTF-32,UTF-16,UTF-8到底是啥关系?
- CloudStack集成KVM报NFS错误
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- 2019年春季学期第二周作业(文件指针)
- python 数据可视化 -- 读取数据
- nginx File not found 错误(转)
- java mvc mvp_一篇文章让你彻底了解 MVC、MVP 、MVVM
- php cbd架构,CBD模式
- ASP.NET简易教程3——SQL存储过程
- jQuery 源码解析笔记(一)
- 许多新兴的互联网O2O企业,做的都是一些“无中生有”的事情
- 不懂算法的程序员不是好工程师!
- bzoj 3895: 取石子(博弈)
- 如何看Spring源码
- 原生js格式化显示json对象以及stringify的妙用
- 和菜鸟一起学android4.0.3源码之硬件gps简单移植【转】
- DOS窗口执行Jmeter测试脚本生成html报告
- iOS Framework Shell打包
- 计算机文件怎么取消隐藏文件,隐藏文件夹,教您电脑隐藏文件夹怎么恢复