微前端中，为子应用配备开发环境临时导航菜单，提高开发效率

Posted 2021-09-13 blueju

首发于 语雀文档

场景

子应用开发过程中，势必需要频繁地切换菜单 ,但因为子应用打包后是要接入到基座的，因此不能有菜单等。但如此的话，日常的开发又会不方便，甚至影响开发效率。

但我的个人直觉，貌似更正确的做法是：将子应用直接接入到基座中开发调试，

因此目前场景下，我们需要的是：
在开发环境下，我们希望有菜单，方便我们开发人员进入及路由切换；
在生产环境下，我们希望没有菜单；

因此我们可以在打包里做手脚。

具体操作

一般能考虑到这种场景的，势必也是使用 umi 有一段时间了，因此操作这块的介绍不会详细到傻瓜式教学。

一、搭建 umi 脚手架

由于我们使用的 umi +qiankun 实现的微前端，因此请先搭建 umi 脚手架，具体操作请按照文档。

https://umijs.org/zh-CN/docs/getting-started#脚手架

二、创建 .umirc.local.ts
local 配置只会在本地开发环境的情况下生效，因此很符合我们想要的场景

https://umijs.org/zh-CN/docs/config#本地临时配置

三、配置导航菜单
利用现成已有的依赖 @umijs/plugin-layout，配置导航菜单

https://umijs.org/zh-CN/plugins/plugin-layout#扩展的路由配置

我是凭回忆写下此文章的，如果有不妥或缺失步骤之处，麻烦提醒，我会及时修改，谢谢。

Github

https://github.com/blueju/my-ideal-umi-subapp-boilerplate

参考：

1. https://umijs.org/zh-CN/docs/config#本地临时配置
2. https://umijs.org/zh-CN/plugins/plugin-layout
3. https://umijs.org/zh-CN/plugins/plugin-layout#扩展的路由配置
4.