ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-05-07 09:04:01  阅读:230  来源: 互联网

标签:菜单 zh CN umijs 开发 https org 为子


首发于 语雀文档

场景

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

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

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

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

具体操作

一般能考虑到这种场景的,势必也是使用 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#扩展的路由配置

标签:菜单,zh,CN,umijs,开发,https,org,为子
来源: https://blog.csdn.net/BLUE_JU/article/details/116479495

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有