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,
  ...
}

devServer.sockHost 与 devServer.sockPort

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

同类型问题解答

链接1

总结

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