关于Vue(webpack)项目在使用Nginx代理后, 热更新失效的问题

本文专门解决疑难杂症, 并不是简单的教你怎么开启热更新, 这个默认就开启的, 而且网上一大堆教程

问题描述, 我在本地开发Vue项目, 使用Webpack-server (也就是npm run dev)  还有想使用热更新

端口使用的7060, 如果通过localhost:7060来访问vue项目是没有问题的, 也能够正常的进行热更新,

但是耐不住我想折腾啊: 我在Linux虚拟机使用了Nginx作为前端页面的代理, 也就是说我先通过域名访问虚拟机(xxx.com解析到我的linux虚拟机), 然后Nginx在把请求转发到vue项目上, 项目访问没问题, 但是热更新失效了

有点讲不明白, 用图来解释下,

 

先通过localhost正常访问: 页面访问成功, 热更新正常

 

接下来使用域名访问: 页面访问成功, 但热更新失败

为什么呢? 原因很简单, webpack直接用地址xxx.com(它不管localhost还是其他域名)和端口7060去访问Nginx了, 但是我的Nginx只监听80端口啊, 你一个热更新来凑什么热闹

怎么解决呢? 也很简单, 只要让热更新模块还是访问localhost:7060就行了(当然还有其他办法: 在Nginx上再加一个7060端口的映射, 这个这么简单就不操作了)

但是找了半天也找不到修改热更新模块的方法, 各种都试过了, 最后没办法, 撸源码

打开node_modules文件夹, 找到webpack-dev-server下的client下的index.js文件, 然后第206行(可能有出入, 但一般就在附近), 它这里就是获取你浏览器地址栏的host, 然后直接替换了, 就这么个简单操作, 害我搞了大半天时间

然后我们把它更改为 'localhost' 就可以了, 注意加上引号

 

好了, 这样就可以了