vue运行时反向代理无限刷新

吐槽

本以为是一次习以为常的部署业务。结果要是再刷新下去，CPU都要爆了！！！

错误情景

开发版本：
- vue：2
开发环境：正常本地window开发。
- bug：无。
生成环境：项目是运行时，运行在52002端口，nginx反向代理127.0.0.1:52002，挂载到域名开启ssl。
- bug：访问域名会无限刷新网页。刷新时候可以看到网页有内容，抓住机会点击跳转也是正常路由跳转，跳转后依然开始无限刷新。

下面是部署项目部分配置代码

vue.config.js

const webpack = require('webpack')
module.exports = {
  publicPath: '/',
  assetsDir: 'static',
  productionSourceMap: true,
  devServer: {
    host: '0.0.0.0',
    port: 52002,
    proxy: {
      '/proxy/api':{
        target:'https://xxx.thatcoder.cn',
        changeOrigin:true,
        pathRewrite:{
          '/proxy/api':'https://xxx.thatcoder.cn'
        }
      }
    },
    allowedHosts: ['localhost', '127.0.0.1', '0.0.0.0', 'xxx.thatcoder.cn'],
  }
};

解决方案

严谨的说，仅提供博主排错误时看到的类似错误与解决方案收录。因为即使错误表现一致，错误原因可能不一致。

破局一

此方法解决博主问题。

执行打包命令，将反向代理的站点设置为打包的目录（默认是dist）。或者将打包文件复制到站点的目录下。（博主选择后者）

破局二

部分人是碰到运行时的热部署经过反向代理后无法通讯导致，热部署是ws协议，与项目共用端口。部分人通过配置关闭热部署能解决。

vue2和vue3关闭热部署

vue.config.js

module.exports = {
  devServer: {
    hot: false
  }
}

vite关闭热部署

vite.config.js

export default {
  server: {
    hmr: false
  }
}

破局三

部分人是碰到运行时的热部署ws协议端口占用，与项目共用端口。部分人通过修改端口能解决。

修改热部署ws协议端口

vue.config.js

module.exports = {
  devServer: {
    client: {  
	  webSocketURL: 'ws://0.0.0.0:52003/ws'  
	},
  }
}

本文为钟意撰写, 采用 CC BY-NC-SA 4.0 许可协议, 转载请注明出处。