vite vue3 代理发布不停自动刷新的问题

 问题描述:

      今天帮朋友处理一个问题，前端使用的项目是vue3 + vite 环境开发的。在使用vs进行运行的时候，本地访问没问题，使用nginx本地代理访问也没有问题，但是使用代理的时候，发现页面不停的自动刷新。同时会发出wss连接报错导致页面更新不停的刷新，提示wss连接失败，如下图:
 

      错误信息一闪一闪的，不停的重复更新。

问题分析:

      一开始以为是项目里面有一个自动连接的服务，发现找来找去，没有找到。后来在网上才发现，这个是开发环境里面，热更新使用的，就是在工具里面编写代码并且保存，页面自动刷新用的。但是使用了代理之后，由于代理走的端口发布前端项目和ws走的端口不一样，导致ws在请求服务器的时候，提示连接失败。从而不停的刷新界面，请求服务器获取连接。

问题处理:

      想要处理这个问题，需要从两方面入手，一个是需要修改vue3里面的代码配置，第二个是修改nginx的反向代理，时期支持wss或者ws。

一、修改vue3里面的配置文件，使其页面端口和ws使用不同的端口，需要修改vite.conf.js文件里面的service，代码如下:

  server: {
        port: 3001, //指定端口号
        open: true,
        hmr: {
            clientPort: 80, // 修改ws端口的地方
        }
    }

最主要的是hmr这个配置。

二、修改nginx反向代理配置:
配置变量如下:
 

upstream pub {
   server localhost:3001; # appserver_ip:ws_port
}


map $http_upgrade $connection_upgrade {
   default upgrade;
   '' close;
}


server {
        listen       8080;
        server_name  localhost;
		client_max_body_size 20m;
      
       location /pub/ {
			proxy_pass http://127.0.0.1:3001/pub/;
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection $connection_upgrade;
			proxy_set_header Host $host;
		}
 }

 三个地方配置完之后，重启服务就可以了。

自己的理解

    平常使用代理，通过nginx反向代理访问网页。但是配置里面，指定了端口为3001，这就导致虽然网页通过nginx反向代理的3001，但是ws并没有。还是走的3001，配上代理的域名，访问页面的时候是XXXX/pub/,但是ws的则是XXXX:3001/pub/ 的情况。 所以，这里通过自动以ws端口为80，默认走代理的默认端口，就避免掉了上面的问题。

原始文档: vite websocket 公网 端口 连接异常问题 - 码农教程