写点什么

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

用户头像
blueju
关注
发布于: 2021 年 05 月 07 日

首发于 语雀文档


<a name="Ei7d1"></a>

场景

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


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


因此目前场景下,我们需要的是:<br />在开发环境下,我们希望有菜单,方便我们开发人员进入及路由切换;<br />在生产环境下,我们希望没有菜单;


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


<a name="BQZ0C"></a>

具体操作

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


<a name="B3Ktm"></a>

一、搭建 umi 脚手架

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


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


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


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


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


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


我是凭回忆写下此文章的,如果有不妥或缺失步骤之处,麻烦提醒,我会及时修改,谢谢。<a name="wDfjg"></a>

Github

https://github.com/blueju/my-ideal-umi-subapp-boilerplate<a name="iOWRq"></a>

参考:

  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. <br />

发布于: 2021 年 05 月 07 日阅读数: 16
用户头像

blueju

关注

还未添加个人签名 2019.04.05 加入

还未添加个人简介

评论

发布
暂无评论
微前端中,为子应用配备开发环境临时导航菜单,提高开发效率