umi项目部署在非根目录下，多路由指向的情况解决方法

Posted 2022-12-06 HeavyShell

本篇，只在umi项目非常熟练的情况下，如不清楚，可去umi官方文档了解。

一，需求：
1号地址：http://abc.abc.com/aaa
众所周知umi项目要部署在非根目录下，配置base必须为某个目录，即base:'/aaa/'
进入项目后，路由会自动以‘/aaa’为前缀，跳转正常，
例如：
（1）点击‘关于我们’，会路由到http://abc.abc.com/aaa/about

二，需求变更
2号地址：http://abc.abc.com/bbb 
服务端配置代理，使2号也指向同一umi项目，并也要保证进入项目后，能正常
当然我们什么都不做，现象将是：
（1）访问http://abc.abc.com/bbb正常
（2）点击‘关于我们’，会路由到http://abc.abc.com/aaa/about
此时问题出现了，没有达到我们预期，会路由到http://abc.abc.com/bbb/about

为什么呢？
因为，配置中base已经配置为'/aaa/',umi项目会以此为前缀进行路由

三，解决思路
排查代码后发现，umi打包编译后的index.html文件中head里会有：

<script>window.routerBase = "/aaa/";</script>

其实此routerBase就是来自于配置base，也是项目运行后，路由要识别的基准前缀

四，处理方案
既然umi会自动生成一个window.routerBase变量，那是否我们可以手动指定覆盖呢，
答案是：可以！

在head之后，例如body中，增加：

<script>window.routerBase = window.location.pathname.split('/')[1];</script>

动态获取url中的对应路径，动态赋值为：'/aaa/'或'/bbb/'，甚至以后ccc，ddd均不是问题。
当然，你的项目可能还需要区分本地开发环境和生产环境，自己在这里加判断咯，
例如：

<script type="text/javascript">window.routerBase = window.routerBase=='/'?'/':window.location.pathname.split('/')[1];</script>

 

小小的问题，往往会启发出宽广思路！