钟意博客
·
vue运行时反向代理无限刷新
💡
原文中文，约1300字，阅读约需4分钟。
📝
内容提要
文章讲述了部署业务时遇到的问题，访问域名会无限刷新网页。解决方案包括设置反向代理站点为打包目录，关闭热部署，修改热部署ws协议端口。
🎯
关键要点
- 部署业务时遇到访问域名无限刷新的问题。
- 开发环境正常，但生成环境在nginx反向代理下出现bug。
- 访问域名时网页内容正常，但仍然无限刷新。
- 解决方案包括将反向代理站点设置为打包目录或复制打包文件到站点目录。
- 关闭热部署可以解决部分因ws协议导致的通讯问题。
- vue2和vue3通过设置devServer的hot为false关闭热部署。
- vite通过设置server的hmr为false关闭热部署。
- 修改热部署ws协议端口可以解决端口占用问题。
❓
延伸问答
为什么在生成环境中访问域名会导致无限刷新？
在生成环境中，nginx反向代理可能导致热部署的ws协议与项目共用端口，从而引发无限刷新问题。
如何解决vue项目在nginx反向代理下的无限刷新问题？
可以将反向代理站点设置为打包目录，或将打包文件复制到站点目录下。
关闭热部署对解决无限刷新的问题有什么帮助？
关闭热部署可以避免ws协议导致的通讯问题，从而解决部分无限刷新的情况。
如何在vue2和vue3中关闭热部署？
在vue.config.js中，将devServer的hot设置为false即可关闭热部署。
vite项目如何关闭热部署？
在vite.config.js中，将server的hmr设置为false即可关闭热部署。
修改热部署ws协议端口有什么作用？
修改热部署ws协议端口可以解决端口占用问题，从而避免无限刷新的情况。
➡️
