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

本篇,只在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>

 

小小的问题,往往会启发出宽广思路!

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在Linux上部署UMI项目,可以按照以下步骤进行操作: 1. 首先,确保你的Linux服务器上已经安装了Node.js和NPM。你可以通过运行以下命令来检查它们的版本: ``` node -v npm -v ``` 如果没有安装,请根据你的Linux发行版进行安装。 2. 克隆或上传你的UMI项目到Linux服务器上的目标目录。 3. 进入项目目录,并使用NPM或Yarn安装项目依赖。如果你使用NPM,可以运行以下命令: ``` cd /path/to/your/project npm install ``` 4. 在UMI项目根目录下创建一个文件名为 `.umirc.local.js` 的文件,并配置你的项目相关信息,如端口号、代理等。一个简单的示例配置如下: ```javascript export default { proxy: { '/api': { 'target': 'http://api.example.com', 'changeOrigin': true, 'pathRewrite': { '^/api' : '' }, }, }, // 更多配置... }; ``` 5. 使用UMI提供的构建命令将项目构建为静态文件。运行以下命令: ``` npm run build ``` 6. 完成构建后,你将在项目根目录下生成一个 `dist` 文件夹,里面包含了构建好的静态文件。 7. 最后,你可以使用任何你喜欢的Web服务器软件(如Nginx)来提供静态文件服务。配置服务器软件,使其指向你项目根目录下的 `dist` 文件夹即可。 这样,你的UMI项目就成功部署在Linux服务器上了。你可以通过访问服务器的IP地址或域名来访问项目。记得在部署过程中根据实际情况进行相应的配置修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值