umi + qiankun 动态注册子应用解决方案

blueju 等级 403 0 0

前言

首发于 语雀文档@blueju


本篇文章可以被视为上一篇文章(https://www.yuque.com/blueju/blog/huuie8)的延续,上一篇文章大致讲述了搭建一个简易微前端平台的过程,其中关于子应用注册的配置是通过硬编码的方式,在构建打包前写入的。

但是真实项目中,更需要的是动态注册子应用,比如说我正参与的这个项目。

本篇文章的示例代码是基于上一篇文章示例代码改动的,上一篇文章示例代码对应的 GitHub 地址是:https://github.com/blueju/umi-qiankun/tree/umi-micro-fe-platform

代码修改集中在主应用,子应用不需要修改代码。

删除之前直接写死的子应用注册配置

官网文档中缺少该部分配置。 以下代码中,- 代表删除该行。 config/config.ts

export default defineConfig({
  ...
  qiankun: {
    master: {
      - apps: [
      -   {
      -     name: 'sub-app-1',
      -     entry: '//localhost:8001',
      -   }
      - ]
    }
  }
})

配置Mock

在 mock 文件夹下新建 config.ts,写入以下代码:

export default {
  '/api/config': {
    apps: [
      {
        name: 'sub-app-1',
        entry: '//localhost:8001',
      },
    ],
  },
};

配置运行时动态注册子应用

参考: https://umijs.org/zh-CN/plugins/plugin-qiankun#b-运行时动态配置子应用(srcappts-里开启) 个人认为 Umi 官网中的写法并不是那么好懂。

在 src 文件夹下新建 app.ts,写入以下代码:

// 从接口中获取子应用配置,export 出的 qiankun 变量是一个 promise
export const qiankun = fetch('/api/config')
  .then((res) => {
    return res.json();
  })
  .then(({ apps }) => {
    return Promise.resolve({
      // 注册子应用信息
      apps,
      // 完整生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
      lifeCycles: {
        afterMount: (props) => {
          console.log(props);
        },
      },
      // 支持更多的其他配置,详细看这里 https://qiankun.umijs.org/zh/api/#start-opts
    });
  });

效果

umi + qiankun 动态注册子应用解决方案

GitHub

https://github.com/blueju/umi-qiankun/tree/runtime-dynamic-register-sub-app

收藏
评论区

相关推荐

《前端实战总结》之使用解释器模式实现获取元素Xpath路径的算法
前端领域里基于javascript的设计模式和算法有很多,在很多复杂应用中也扮演着很重要的角色,接下来就介绍一下javascript设计模式中的解释器模式,并用它来实现一个获取元素Xpath路径的算法。 上期回顾 《前端实战总结》之迭代器模式的N1种应用场景(https://juejin.im/post/6844904008616771591)
《Google SRE》读后感
注:从我的知乎搬移过来,方便管理,link:《Google SRE》读后感(https://link.jianshu.com/?thttps://zhuanlan.zhihu.com/p/22912741?group_id815131133242134528) (https://imghelloworld.osscnbeijing.a
舒文:浅谈阿里前端的多样化
2007年,Jeff Atwood 提出了一个著名的观点, 戏谑又似认真地称其为 Atwood's Law(https://blog.codinghorror.com/theprincipleofleastpower/): _any application that can be written in JavaScript, will event
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
JavaScript中本地存储的方式有哪些?
(https://imghelloworld.osscnbeijing.aliyuncs.com/1f907f0895e2be23aa56604dd42e3626.png) 一、方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage loc
搭建 umi + qiankun + antd 的微前端平台
<a name"f5444d4a"</a 关键词: umi qiankun ant design pro 非动态注册子应用 非动态装载子应用(路由)<a name"Lxdp4"</a 背景银行项目,需要一个前端中台,承载各项目组开发的应用,本篇文章是在工作实践后所写,还是具有一定可借鉴性的,至于官网已经有相关内容还专门写这么一篇,还
umi 项目多环境打包配置
参考:1. 1. 1. <br /我的需求: 在不同环境(dvl、sit)下打包,请求基础地址也需要随环境的变化而改变<br /遇到的困难: umi v3 文档不完善 未知bug<a name"K770H"</a 1. 创建不同环境的配置文件此部分可参考:2. <br /需要 dvl、sit 两个环境,因此创建两个配置文件,如图:<br
umi + qiankun 动态注册子应用解决方案
前言 首发于 <br /本篇文章可以被视为上一篇文章()的延续,上一篇文章大致讲述了搭建一个简易微前端平台的过程,其中关于子应用注册的配置是通过硬编码的方式,在构建打包前写入的。<br /<br /但是真实项目中,更需要的是动态注册子应用,比如说我正参与的这个项目。<br /<br /本篇文章的示例代码是基于上一篇文章示例代码改动的,上一篇文
umi +qiankun 主应用动态装载子应用(路由)解决方案
<a name"p1boA"</a 前言接上一篇(),上一篇中使用的都是运行时动态注册子应用,子应用路由仍然是写死的、非动态获取。<br /<br /然后真实项目中除了需要动态注册子应用,还很有可能需要动态装载子应用(路由),比如说:不同权限的用户需要给予他们不同的路由。<br /<br /此篇 blog 的代码是基于上一篇进行改动的,上一篇
使用 umi 3 创建子应用并接入主应用
使用 umi 3 创建子应用并接入主应用前言:<br /umi 3 更新频繁,文档不完善,时效性不定,因此前提条件很重要,今天是2020年8月21日。<br /<br /创建子应用使用的脚手架是:umi 3<br /创建主应用使用的脚手架是:um 2,但是本篇文章暂时不介绍创建主应用的过程及在主应用中的配置过程。<br /<a name"Yd
利用CreateRemoteThread( ) 实现远程线程注入
前言首先想法是 强制创建一个目标进程的线程,把我自己的恶意DLL加载进去被注入的DLL拥有目标进程内存的访问权限,所以我们可以通过该向某个进程注入DLL时的方法主要有以下三种:• 创建远程线程(CreateRemoteThread() API)• 使用注册表(AppInitDLLs值)• 消息钩取(SetWindowsHookEx()) 小试牛刀目前尝试第一
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
手把手教你用Python轻松玩转SQL注入
前言大家好,我是黄伟。相信大家经常有听到过SQL注入啥的,但是并不是特别了解;小编以前就是经常听别人说,但是自己啥都不懂,直到后来看了相关教材后才明白,原来是这么个东西,那么到底是什么东西了,又或者是不是个东西了?我们接着往下看。 一、浅谈SQL注入SQL注入其实就是把SQL命令插入到WEB表单中提交或者输入一些页面请求的查询字符串,比如我们输网址,就是相