Vue路由包含#号导致的Nginx无法转发问题

最新推荐文章于 2024-08-21 21:01:25 发布

FollowYourHeart2015

最新推荐文章于 2024-08-21 21:01:25 发布

阅读量1.1w

点赞数 5

分类专栏：前端文章标签： vue nginx

本文链接：https://blog.csdn.net/MuErHuoXu/article/details/104031868

版权

本文探讨了Vue应用中#号路由导致的Nginx无法转发问题，提供了三种解决方案：Nginx直接转发（失败），修改Vue路由模式（因已公开链接不可行），以及在Vue应用内重定向（用户体验较差但可行）。详细分析了各方案的优缺点和实施细节。

摘要由CSDN通过智能技术生成

要解决的场景

现有2个前端应用A和B，域名不同，页面相同(B对A进行了重构)，后续页面功能的开发都会在B应用中，但由于A应用页面的入口已经对外开放，故不能A应用不能下线，期望通过跳转的方式，将所有打到A应用的请求，转发到B应用上。

部署情况

A应用为纯VUE静态工程，使用Nginx进行负载，URL采用Hash模式，即采用#方式，比如https://xxx.xx.com/myreport/#/myReport/tijian?ad_od=1，https://xxx.xx.com/myreport/#/myReport/jiyin?ad_od=1

B应用为React静态工程，使用Nginx进行负载

方案一：通过A应用的Nginx进行连接的跳转

优点：A应用的不需要任何开发量，代码不需改动，在Nginx上做层转发就行。
实现方式：涉及到A的3个页面需要跳转，分别对应3个路径，
https://xxx.xx.com/myreport/#/geneIndex?ad_od=1
https://xxx.xx.com/myreport/#/myReport/tijian?ad_od=1
https://xxx.xx.com/myreport/#/myReport/jiyin?ad_od=1
，配置Nginx的location正则匹配A的路径，将对应转发到B应用页面，配置后如下