今天来分享一个我在公司修改之前前端留下来的项目的坑。来说说大致的一个经过把，我老板说这个项目是之前的一个前端做的，用的是ssr服务端渲染的技术，不过他项目在线上会一直频繁的刷新，据说他想破脑袋都想不出来，最终因为解决不了这个问题被老板劝退？😂，哈哈哈，其实并不是，我也不清楚啥子情况离职哈哈，接着我就想证明自己的逝力，想尝试去解决这个问题，如果不解决的话就得重新写一份这个代码。
项目目录结构
我当时第一眼看上去，这不就是传统的spa的vue项目吗
看了一眼，发现这个项目自己写了服务端，我就去看他的一个源码
服务端代码
看了一样，大概的代码逻辑就是使用vite创建了一个开发服务器，通过express去拦截特定url，通过fs读取默认的模板配置，再通过一个ssr_render的函数，去把所有路由下所有的组件合并成html，将这个html进行格式化，以及pretty格式化，最后返回一个html字符串。我看了下好像没有太大的问题，我就尝试在本地测试复现。
哎，好像本地是正常的，当时测完我就开心的以为事情解决了，然后通过nginx部署到线上，结果果然和老板描述的一样，会不断的频繁刷新页面
思考
接着我就进行了思考，本地不会，线上会，使用的nginx做的转发，那毫无疑问是nginx的问题把，然后我尝试从nginx配置上找原因
server {
listen 60080 proxy_protocol;
server_name xxx;
real_ip_header proxy_protocol;
real_ip_recursive on;
set_real_ip_from xxx.xxx.xxx.xxx;
set_real_ip_from 127.0.0.1;
location / {
proxy_pass http://127.0.0.1:8191;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 如果使用 WebSocket，添加以下配置
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
我这个是内网项目，域名会先转发到我公网的nginx服务器再转发到我内网的ip上，我在网上测试了很多种方式，还是找不到问题。但是好像线上控制台看到了websocket报错
于是我去百度搜了很多nginx和websocket关联的一些文章，依旧无果。后面我觉得很奇怪，不应该是websocket的问题，因为我项目里面客服的前端socket连接代码全部注释掉了，怎么还会有websocket的报错，于是我又把问题进行了转移。
思考2
我在网络控制台去查看，发现每次自动刷新多了一个_vite_ping这个请求，我chat搜了一下_vite_ping 是 Vite 开发服务器用来检测客户端连接是否健康的请求。这是 Vite 内部机制的一部分，用于确保热模块替换（HMR）功能正常工作。我就思考了会不会是vite源码里面又使用websocket？接着我就去百度vite项目中频繁自动刷新页面的问题，果然就找到了相关的文章
感谢这两篇文章：
vite、vue3本地页面正常显示不刷新，外网穿透后页面不停刷新
vite项目 通过外网域名访问 无限刷新 的解决办法
来解释一下吧，在vite源码里面进行websocket连接的时候会带端口号，当我进行转发之后，实际上我域名是没有带端口的，它的访问就变成了域名:端口
第一篇文章是原理
第二篇文章是具体解决的方式
通过第二篇文章的处理方式他就不会加上端口去访问
最终解决方案
还是写一下把，在vite.config.js进行配置
import { defineConfig } from 'vite';
export default defineConfig({
//...你自己的配置
server: {
hmr: {
protocol: 'ws',
host: '127.0.0.1'
}
},
}
结语
每一次的踩坑都是成长，会让我不断的探索不断的寻求方式去解决问题，不仅是开拓大脑思维，也是积累经验，期待我可以变得更强大。最后这里还是需要鸣谢一个大佬，总是能帮我搜索到关键信息，搜索引擎这块我还是得再加强哈哈哈，加油！！
