钟意博客
·
vue运行时反向代理无限刷新
💡
原文中文，约1200字，阅读约需3分钟。
📝
内容提要
在部署Vue项目时，解决无限刷新问题的方法包括：1) 将反向代理指向打包目录；2) 关闭热部署以避免端口冲突；3) 修改热部署的ws协议端口。
🎯
关键要点
- 在部署Vue项目时，遇到无限刷新问题。
- 项目运行在52002端口，nginx反向代理127.0.0.1:52002。
- 访问域名时网页会无限刷新，但路由跳转正常。
- 解决方案一：将反向代理指向打包目录或复制打包文件到站点目录。
- 解决方案二：关闭热部署以避免端口冲突，vue2和vue3的配置方法相同。
- 解决方案三：修改热部署的ws协议端口以避免与项目共用端口。
❓
延伸问答
Vue项目部署时遇到无限刷新的原因是什么？
无限刷新问题通常是由于反向代理配置不当或热部署与项目端口冲突导致的。
如何解决Vue项目的无限刷新问题？
可以通过将反向代理指向打包目录、关闭热部署或修改热部署的ws协议端口来解决。
关闭Vue热部署的配置方法是什么？
在vue.config.js中设置devServer的hot属性为false即可关闭热部署。
如何修改热部署的ws协议端口？
在vue.config.js中设置devServer的client属性，指定webSocketURL为新的端口。
反向代理指向打包目录的具体步骤是什么？
执行打包命令后，将反向代理的站点设置为打包的目录，或将打包文件复制到站点目录下。
Vue2和Vue3关闭热部署的配置是否相同？
是的，Vue2和Vue3关闭热部署的配置方法是相同的，都是在vue.config.js中设置hot为false。
➡️
