V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
artshooter
V2EX  ›  程序员

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

  •  
  •   artshooter · 307 天前 · 855 次点击
    这是一个创建于 307 天前的主题,其中的信息可能已经有所发展或是发生改变。

    背景:某后台管理系统用 乾坤微前端框架,进行了拆分。 拆分后 主应用负责登陆/菜单展示等基础功能;子应用负责展示模块内的页面。

    问题:当模块内需要增加菜单时,需要在主/子应用内 都增加相同菜单配置。 (主应用里的 用于展示在菜单栏,子应用里的 用于注册这个菜单路由。) 感觉这样操作很繁琐。 在多人协同开发时,主应用中的改动还容易冲突。

    诉求:

    1. 增/改 菜单路径时,只需要修改子应用内的代码,即可实现在菜单栏中展示新的菜单。
    2. 只通过 修改主应用或者运维配置 来实现诉求 1 (因为子应用很多,如果是通过修改子应用实现的话,改动很大且重复

    当前想法: 将后台系统的菜单结构缓存在浏览器中,在进入子应用时 更新菜单结构; 主应用利用缓存中的菜单结构进行菜单栏展示; 若浏览器缓存中无菜单结构,则使用主应用代码中的菜单结构展示,并缓存。

    当前遇到的问题: 无法 “在进入子应用时 更新菜单结构” 。 因为在进入子应用时,只能根据子应用的地址 获取出子应用的 html ,app.js 等打包后的代码。 app.js 中的代码经过了混淆处理 无法解析出子应用的 router 。

    额外信息: 前端框架 vue2 ,子应用的 gitlab-ci 是直接使用的公共模版 所有的子应用的 ci/cd 流程一次修改 多处生效, 子应用数量大约有十几个, 不用考虑浏览器兼容 最新的 chrome 能实现即可。

    7 条回复    2023-07-08 23:12:06 +08:00
    RealJacob
        1
    RealJacob  
       307 天前   ❤️ 1
    不认为做到浏览器缓存里是件好事,看起来只是很临时的方案。当然只用 qiankun 应该是做不到这个描述的,可以在一个运维系统中管理子应用配置(包括 router 的配置以及其他的配置),而不是在主应用中 hard code 维护这些配置或者在浏览器缓存里维护。每次进到主应用调用接口获取配置,加载对应子应用
    RealJacob
        2
    RealJacob  
       307 天前   ❤️ 1
    @RealJacob 补充下,不是不能 hardcode ,如果针对不常变化的主子应用,hardcode 肯定也是合适的,但针对你这个场景,时不时增加一个子应用入口,还是配置化更合理。多调一个接口的成本,减少了管理成本,新增子应用基座也无需改动
    flyqie
        3
    flyqie  
       307 天前   ❤️ 1
    楼上 +1

    建议直接抽出来一个配置中心。
    artshooter
        4
    artshooter  
    OP
       307 天前
    好的,受教了。感谢
    @RealJacob @flyqie
    xuanbg
        5
    xuanbg  
       307 天前
    微前端的话,就没什么主从关系,所有应用都是平等的。你可以指定一个入口应用,然后在入口应用实现登录和个人中心功能。访问其他应用的话,url 带着 token 过去就行了。
    musi
        6
    musi  
       307 天前 via iPhone
    可以在打包的时候生成一份路由表,前端直接加载就行了
    artshooter
        7
    artshooter  
    OP
       307 天前
    @xuanbg 嗯 ,只是语癖上 把那个入口应用叫做主应用了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   992 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 91ms · UTC 21:54 · PVG 05:54 · LAX 14:54 · JFK 17:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.