本文专门解决疑难杂症, 并不是简单的教你怎么开启热更新, 这个默认就开启的, 而且网上一大堆教程(全是搬运工..哎)
如果你只是简单的使用 "localhost:端口" 来访问你的项目, 那么本文基本对你没用
问题描述, 我在本地开发Vue项目, 使用Webpack-server (也就是npm run dev) 还有想使用热更新
如果通过localhost:7060来访问是没有问题的, 也能够热更新, 但是我使用了Nginx代理, 把请求转发到了Nginx上, 然后Nginx在返回本地的 localhost:7060, 项目访问没问题, 但是如更新失效了
有点讲不明白, 用图来解释下,
先通过localhost正常访问: 访问成功, 热更新正常
接下来使用域名访问: 访问成功, 热更新失败
为什么呢? 原因很简单, 傻逼webpack直接用域名gityou.com和端口7060去访问Nginx了, 但是我的Nginx只监听80端口啊, 你一个热更新来凑什么热闹
怎么解决呢, 也很简单, 只要让热更新模块还是访问localhost:7060就行了
但是找了半天也找不到修改热更新模块的方法, 各种都试过了, 最后没办法, 撸源码
打开node_modules文件夹, 找到webpack-dev-server --- clinet --- index.js文件, 然后206行, 它这里就是获取你浏览器地址栏的host, 然后直接替换了, 就这么个傻逼操作, 而且还没有修改的方式害我搞了半天时间
然后我们把它更改为 'localhost' 就可以了
好了, 这样就可以了