vue-cli3热更新失效问题
公司的一个使用vue-cli3搭建的项目一直无法热更新，每次保存代码后都需要手动刷新页面才能看到修改之后的页面，作为一个强迫症晚期患者，那肯定是忍不了。经过个人研究学习，修复好了项目热更新问题，因此写下博客分享给各位。
内容都是本人看文档查资料后自己理解的，难免有理解不到位的地方，也欢迎大家指出错误之处，一起学习共同进步。
项目开发环境背景
我司项目由于相关原因需要前端开发的时候使用nginx代理，例如项目启动后为http://localhost:8080，配置nginx后前端访问
排查步骤
sockjs-client
应该有不少使用vue脚手架创建项目的小伙伴都遇到过这么一个问题，/sockjs-node/info?t=在浏览器控制台一直报错。在百度之后大家的解答出人意料的一致：
注释掉/node_modules/sockjs-client/dist/sockjs.js这个文件第1605行的self.xhr.send(payload)
事实上我司项目中也是这么处理的，那会不会是sockjs-client导致的热更新失效呢？
答案是：是的。
在将源码注释去掉后，经过测试发现：
访问localhost:8080不会报错，访问代理地址也不会报错，
而访问代理地址就会开始报错。
而且对比浏览器network中报错请求的地址可以发现：
前端页面地址为localhost:8080或时sockjs请求的地址是http://xxxxx(本机ip地址)，
页面地址为时sockjs请求的地址是https://xxxxx(本机ip地址)。
devServer.public
查阅webpack文档，发现这个配置项：
文档上说明，如果开发服务器被nginx代理，则可配置该项。那就加上试一下
// vue.config.js
devServer: {
public: ':443',
}
重启项目，类似/sockjs-node/info?t=格式的报错没有了，但出现了新的错误：
WebSocket connection to 'wss:///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,
...
}
本人在错误排查过程中也试过这两个配置项，没有效果；在查阅资料过程中部分开发者表示用了这个有效。
同类型问题解答
总结
以上就是本次解决项目热更新问题的全过程，很多地方本人还是一知半解，只是把结果搞出来了。文章中有任何问题也欢迎留言讨论 ：)
