vue运行时反向代理无限刷新
内容提要
文章讲述了部署业务时遇到的问题，访问域名会无限刷新网页。解决方案包括设置反向代理站点为打包目录，关闭热部署，修改热部署ws协议端口。
延伸解读
问题特征：内容正常却无限刷新
文章描述的现象比较特殊：访问域名时网页内容能正常显示，路由跳转也正常，但页面会持续无限刷新。这与常见的白屏或报错不同，说明前端资源加载和路由本身没有致命错误，问题更可能出在部署配置或开发服务器与反向代理的交互上。开发环境正常而生产环境异常，进一步指向环境差异。
首要排查方向：反向代理的站点目录
作者最终通过将反向代理站点设置为打包目录（默认dist），或把打包文件复制到站点目录下解决了问题。这提示当Nginx反向代理指向的目录不是实际打包输出目录时，可能导致资源请求被错误处理，从而触发无限刷新。部署时应优先确认Nginx的root或alias是否指向正确的打包文件夹。
热部署与WebSocket的潜在影响
文章提到部分人遇到类似问题是因为热部署的WebSocket协议经过反向代理后无法通讯，或WebSocket端口被占用。热部署通常与项目共用端口，在Nginx代理下可能因协议升级配置不当而异常。关闭热部署（Vue设置devServer.hot为false，Vite设置server.hmr为false）或修改WebSocket端口，可作为备选方案。
原因多样，需结合环境判断
作者强调即使错误表现一致，原因也可能不同，因此提供的方案是排错时的参考而非通用解。读者遇到无限刷新时，应先检查Nginx代理目录是否正确，再考虑热部署相关配置。若问题依旧，需结合自身项目的构建工具、代理规则和端口占用情况进一步分析。
Q&A
为什么在生成环境中访问域名会导致无限刷新？
在生成环境中，nginx反向代理可能导致热部署的ws协议与项目共用端口，从而引发无限刷新问题。
如何解决vue项目在nginx反向代理下的无限刷新问题？
可以将反向代理站点设置为打包目录，或将打包文件复制到站点目录下。
关闭热部署对解决无限刷新的问题有什么帮助？
关闭热部署可以避免ws协议导致的通讯问题，从而解决部分无限刷新的情况。
如何在vue2和vue3中关闭热部署？
在vue.config.js中，将devServer的hot设置为false即可关闭热部署。
vite项目如何关闭热部署？
在vite.config.js中，将server的hmr设置为false即可关闭热部署。
修改热部署ws协议端口有什么作用？
修改热部署ws协议端口可以解决端口占用问题，从而避免无限刷新的情况。
