vue之热更新问题

一、热更新失败

1.1、热更新成功，浏览器未响应

1.1.1、问题说明与分析

　　问题说明：

　　　　代码修改后，命令行进行了编译 Compiling... 但是浏览器没有更新页面。

　　问题分析：

　　　　修改代码后，进行了编译，说明热更新是没有问题的，可能是更新浏览器的问题，或者说webpack-dev-server 没有真正地通知到浏览器，所以没有刷新；

　　　　

　　　　页面  sockjs-node/info 报错：

　　　　

 1.1.2、问题原因

　　问题其实就是因为开了VPN代理，代理以为你的局域地址是public · adress。所以并不能得到响应，因此webpack-dev-server 和浏览器的双工通信没有成功链接，浏览器就无法监听到 webpack-dev-server 的热更新，最后浏览器 就傻了。

 1.1.3、解决方案 

　　a）每次开Vue项目时，先关闭VPN，等项目启动了再开VPN，因为双工通信只要第一次链接好了，后面就能正常通信了，VPN再也不会捣乱，缺点是不能刷新，一刷新又会发Request了。----由于我们的项目需要在VPN开启下才能加载出来，所以这个解决方案　　不适用。

　　b）把当前IP地址加到VPN 的 exclude list，这样就还是会访问局域地址，不会以为它是public address。

　　c）修改请求的host 

　　　　i. 可以在 package.json 里改成 “server”: “vue-cli-service serve --host 192.167.14.5 --port 1024” 《192.167.14.5本机ip地址》

　　　　ii.  或者在vue.config.js 里添加

　　　　　　module.exports = {

  　　　　　　...

   　　　　　　devServer: {

    　　　　　　host: '0.0.0.0',

    　　　　　　public: '0.0.0.0:8080',

    　　　　　　disableHostCheck: true 

  　　　　　　}

　　　　　　}