微前端架构下,主应用如何快速获取子应用的路由结构?

查看 60|回复 2
作者:artshooter   
背景:某后台管理系统用 乾坤微前端框架,进行了拆分。
拆分后 主应用负责登陆/菜单展示等基础功能;子应用负责展示模块内的页面。
问题:当模块内需要增加菜单时,需要在主/子应用内 都增加相同菜单配置。
(主应用里的 用于展示在菜单栏,子应用里的 用于注册这个菜单路由。)
感觉这样操作很繁琐。
在多人协同开发时,主应用中的改动还容易冲突。
诉求:
[ol]
  • 增/改 菜单路径时,只需要修改子应用内的代码,即可实现在菜单栏中展示新的菜单。
  • 只通过 修改主应用或者运维配置 来实现诉求 1
    (因为子应用很多,如果是通过修改子应用实现的话,改动很大且重复
    [/ol]
    当前想法:
    将后台系统的菜单结构缓存在浏览器中,在进入子应用时 更新菜单结构;
    主应用利用缓存中的菜单结构进行菜单栏展示;
    若浏览器缓存中无菜单结构,则使用主应用代码中的菜单结构展示,并缓存。
    当前遇到的问题:
    无法 “在进入子应用时 更新菜单结构” 。
    因为在进入子应用时,只能根据子应用的地址 获取出子应用的 html ,app.js 等打包后的代码。
    app.js 中的代码经过了混淆处理 无法解析出子应用的 router 。
    额外信息:
    前端框架 vue2 ,子应用的 gitlab-ci 是直接使用的公共模版 所有的子应用的 ci/cd 流程一次修改 多处生效,
    子应用数量大约有十几个, 不用考虑浏览器兼容 最新的 chrome 能实现即可。

    菜单, 应用, , 结构

  • RealJacob   
    不认为做到浏览器缓存里是件好事,看起来只是很临时的方案。当然只用 qiankun 应该是做不到这个描述的,可以在一个运维系统中管理子应用配置(包括 router 的配置以及其他的配置),而不是在主应用中 hard code 维护这些配置或者在浏览器缓存里维护。每次进到主应用调用接口获取配置,加载对应子应用
    RealJacob   
    @RealJacob 补充下,不是不能 hardcode ,如果针对不常变化的主子应用,hardcode 肯定也是合适的,但针对你这个场景,时不时增加一个子应用入口,还是配置化更合理。多调一个接口的成本,减少了管理成本,新增子应用基座也无需改动
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部