trafficstars

hi，大家好！尽管官方已经提供了 qiankun 的 demo 和教程，但是覆盖面有限。比如说，qiankun 嵌套的使用、angular 作为主应用等，都没有可以参考的 demo。有不少的小伙伴，在不同的技术栈或者框架中使用 qiankun 时，遇到了很多棘手的问题。

如果你有写过一些不同框架/技术栈的 demo ，希望可以分享出来，帮助他人快速上手，谢谢。直接在 issue 中回复 demo 的地址并附上简介即可。

PS：如果别人的 demo 有帮助到你，可以给他点个赞或者点个 star

注意： 请不要在 issue 回复无关内容，对 demo 有疑问请去 demo 仓库提问，无关的回复将会被定期清理。

Hi all! Although the demo and tutorial of qiankun have been provided, the scenarios covered are limited. For example, there are no demos that can be referenced for the use of qiankun nesting and angular as the main application. There are many partners who have encountered many difficult problems when using qiankun in different frameworks.

If you have written demos of different frameworks/technology stacks, I hope you can share them to help others get started quickly, thanks. Reply to the demo address in the issue and attach a brief introduction.

PS: If someone else’s demo is helpful to you, you can give him a like or a star.

Note: Please do not reply to irrelevant content in the issue. If you have any questions about the demo, please go to the demo warehouse to ask questions. Irrelevant replies will be cleaned up regularly.

Oct 23 '21 07:10 gongshun

地址：https://github.com/gongshun/qiankun-vue-demo

介绍：主子应用都是 vue 技术栈，在常规使用的基础上实现了：tab 标签页效果、应用之间的组件共享、依赖共享、子应用是 vite 构建的等效果（代码在不同的分支）

Oct 23 '21 08:10 gongshun

地址：https://github.com/gongshun/qiankun-vue-element-admin

介绍：主子项目都是 vue-element-admin 创建的，路由都是 history 模式

Oct 23 '21 08:10 gongshun

地址

https://github.com/niexq/react-app-qiankun-main

简介

🍔 基座

使用create-react-app初始化项目;
安装"qiankun": "^2.4.0";
代码地址：react-app-qiankun-main;
独立仓库，独立部署，独立域名：https://qiankun.xiaoqiang.tech;

🍟 react子应用

使用create-react-app初始化项目;
安装"react-app-rewired": "^2.1.8"、"react-router-dom": "^5.2.0";
代码地址：react-app-qiankun-sub;
独立仓库，独立部署，独立域名：https://react.xiaoqiang.tech;

🌮 vue子应用

使用vue-cli初始化项目，对应"vue": "^3.0.0";
安装"vue-router": "^4.0.0-beta.11";
代码地址：vue-cli-qiankun-sub;
独立仓库，独立部署，独立域名：https://vue.xiaoqiang.tech;

Oct 23 '21 14:10 niexq

地址：https://github.com/xtthaop/vue-qiankun-demo

介绍：主子应用都是 vue 技术栈，在常规使用的基础上实现了权限管理，详细请查看这里

Oct 25 '21 07:10 xtthaop

地址：https://github.com/wl-ui/wl-mfe 介绍：qiankun2.x & vue3.x 版本地址：https://github.com/hql7/wl-micro-frontends 介绍：qiankun1.x & vue2x 版本地址：https://github.com/hql7/wl-cli 介绍：快速创建qiankun主应用、自应用结构脚手架

Oct 27 '21 08:10 hql7

地址：https://github.com/zhaoshunchen/qiankun-nested-demo 介绍：qiankun2.x & vue2.x 版本
业务场景：项目 A，内部注册项目 B，项目 B也使用了 qiankun，内部注册项目 C

Oct 29 '21 01:10 zhaoshunchen

地址：https://github.com/8696/micro-web-demo 预览：http://micro.icode.link 主应用：react^17.0.2 子应用：react^17.0.2、vue^3.2.40、angular^15.2.0

Dec 12 '21 09:12 8696

https://github.com/GreenBoy0526/qiankun-demo 主要是解决微应用路由切换后主应用切换路由报错问题，代码参考主应用的路由配置，主应用vite+vue3，子应用vue2

router.beforeEach((to, from, next) => {
  if (!window.history.state.current) window.history.state.current = to.fullPath;
  if (!window.history.state.back) window.history.state.back = from.fullPath;
  return next();
});

Dec 15 '21 02:12 GreenBoy0526

主应用使用vite3+vue3，子应用使用vuecli +vue3

单纯vue3 qiankun的 demo文档说明

代码仓库地址

线上预览版本 http://vue.tuokecat.com/

Dec 27 '21 02:12 aehyok

非常简单的 Demo~ 主应用：React 子应用：React, Vue 有各自路由，欢迎 fork 普通业务的 Demo: https://github.com/haixiangyan/qiankun-bigass-app 企业微信侧边栏的 qiankun 模板：https://github.com/wecom-sidebar/wecom-sidebar-qiankun-tpl

Dec 29 '21 14:12 haixiangyan

Demo还没有时间整理，说一下遇到的问题以及解决方案吧主应用: Angular10 子应用: Vue2 项目概况：主应用本身有自己的业务代码和页面，使用的是@angular/router,，hash路由，子应用会在特定路由加载使用的是registerMicroApps（为啥不用loadMicroApp？因为子应用的卸载时机不太好把握）

下面说一下遇到的问题以及解决方案吧，首先说明一下解决方案只保证对我们这个项目有效，大家只供参考

问题1：

问题描述：主应用页面使用浏览器返回功能（history.back()）失效（即使还从未加载过子应用），页面url会变，但是页面不会渲染，只有下次Angular脏检查才会渲染新页面渲染（可以通过调用一下window.dispatchEvent(new Event('resize'))验证下）

浏览器：Chrome/IE11

问题定位：qiankun依赖的single-spa一开始就会拦截篡改原生的window.addEventListener，源码片段如下：

  // https://github.com/single-spa/single-spa/blob/bcea338aff9231bacf9926ffc7b70dfe83e9f6eb/src/navigation/navigation-events.js#L147
  window.addEventListener = function (eventName, fn) {
    if (typeof fn === "function") {
      if (
        routingEventsListeningTo.indexOf(eventName) >= 0 &&
        !find(capturedEventListeners[eventName], (listener) => listener === fn)
      ) {
        capturedEventListeners[eventName].push(fn);
        return;
      }
    }

    return originalAddEventListener.apply(this, arguments);
  };

而且上述代码会在Angular Zone注册各种监听事件之前执行，导致Angular Zone注册的hashchange事件会被拦截，虽然single-spa会在url改变时调用一下所有注册的回调，但是不知为何Zone并不会响应浏览器的返回事件了

解决：

方案1：自己在全局注册一下hashchange事件(比如app.component.ts)，然后手动触发一下Angular脏检查

fromEvent(window, 'hashchange')
    .pipe(
        takeUntil(this.complete$),
        tap(()=>{
            const evt = document.createEvent('HTMLEvents');
            evt.initEvent('resize', false, false);
            window.dispatchEvent(evt)
        })
    )

方案2：让主应用的各种注册事件在single-spa拦截window.addEventListener前执行，修改single-spa源码

window.addEventListener = function (eventName, fn) {
    if (typeof fn === "function") {
      if (
        routingEventsListeningTo.indexOf(eventName) >= 0 &&
        !find(capturedEventListeners[eventName], (listener) => listener === fn) &&
        isStarted() // 加一个这个判断，isStarted是源码里面提供的方法，判断微服务是否启动
      ) {
        capturedEventListeners[eventName].push(fn);
        return;
      }
    }

问题2：

问题描述：子应用记载过一次之后，返回主应用的页面，Zone脏检查就出问题了，进入主应用某些页面本应该触发的某些事件就会莫名其妙的不触发，比如：某个页面使用了ng-zorro的nz-table组件，本来组件初始化就会触发的nzQueryParams并没有被触发

浏览器：IE11

问题定位：IE不支持Proxy，qiankun会使用SnapshotSandbox沙箱来隔离父子应用对于window对象的修改 https://github.com/umijs/qiankun/blob/d626baaa342a4ce74a3b944f4cedc40c1bf661b7/src/sandbox/index.ts#L42-L46 当加载子应用时会为子应用创建一个沙箱，如果已创建过就会还原子应用卸载时的window快照，有兴趣可以看下源码，不难理解 https://github.com/umijs/qiankun/blob/d626baaa342a4ce74a3b944f4cedc40c1bf661b7/src/sandbox/snapshotSandbox.ts#L40-L53 https://github.com/umijs/qiankun/blob/d626baaa342a4ce74a3b944f4cedc40c1bf661b7/src/sandbox/snapshotSandbox.ts#L8-L16 问题就出在这里，当进入子应用并从子应用回来，window.setInterval会被还原为进入之前的对象，然后主应用脏检查就出问题了，原因尚未可知 https://github.com/umijs/qiankun/blob/d626baaa342a4ce74a3b944f4cedc40c1bf661b7/src/sandbox/snapshotSandbox.ts#L55-L71

解决：不记录Zone快照

function iter(obj: typeof window, callbackFn: (prop: any) => void) {
  for (const prop in obj) {
    // 修改点在这里
    if ((obj.hasOwnProperty(prop) || prop === 'clearInterval') && prop !== 'setInterval') {
      callbackFn(prop);
    }
  }
}

问题3：

问题描述：Target container with #xxx not existed while xxx mounting!，第二次进入子应用偶现这个错误（快速使用浏览器返回进入子应用可复现），因为是在特定路由加载子应用，子应用挂载时，容器还不存在

浏览器：Chrome/IE

问题定位：出现这个问题不难理解，就是子应用挂载时指定的容器还未渲染在DOM中 https://github.com/umijs/qiankun/blob/d626baaa342a4ce74a3b944f4cedc40c1bf661b7/src/loader.ts#L392-L402 https://github.com/umijs/qiankun/blob/d626baaa342a4ce74a3b944f4cedc40c1bf661b7/src/loader.ts#L171-L186 https://github.com/umijs/qiankun/blob/d626baaa342a4ce74a3b944f4cedc40c1bf661b7/src/loader.ts#L35-L43 为什么会出现呢？浏览器卡一点，或者页面渲染加入了过渡动画都可能导致这个问题

解决：删除过渡动画有可能解决，但是有些过渡动画确实能够提升用户体验，直接去掉不太可取, 我采用如下方案：修改qiankun loader源码（这里也希望qiankun API能够支持获取容器的最大重试次数）

// https://github.com/umijs/qiankun/blob/d626baaa342a4ce74a3b944f4cedc40c1bf661b7/src/loader.ts#L393
async () => {
  const useNewContainer = remountContainer !== initialContainer;
  if (useNewContainer || !appWrapperElement) {
    // element will be destroyed after unmounted, we need to recreate it if it not exist
    // or we try to remount into a new container
    appWrapperElement = createElement(appContent, strictStyleIsolation, scopedCSS, appName);
    syncAppWrapperElement2Sandbox(appWrapperElement);
  }

  // 修改点：加入以下代码片段，留下充足的时间等待容器加载（每300ms重试一次，最多重试15次）
  if (!getContainer(initialContainer!)) {
    await new Promise((resolve) => {
      let count = 0;
      const timer = setInterval(() => {
        if (getContainer(initialContainer!) || count > 15) {
          clearInterval(timer);
          resolve({});
        }
        count++;
      }, 300);
    });
  }

  render({ element: appWrapperElement, loading: true, container: remountContainer }, 'mounting');
}

举一反三：其他各个阶段的Target container with #xxx not existed ，也可参考类似思路解决

附

修改了node_modules源码，如何让其他小伙伴也能够一起用，推荐 patch-package

Jan 05 '22 06:01 hairgc

地址：https://github.com/sh-winter/vite-plugin-qiankun (demo 在 example 目录下)

介绍：主子应用都是由 vite 构建的，子应用使用了 vue3，支持开发环境😉

Feb 11 '22 04:02 sh-winter

参考代码地址: https://github.com/kuaifengle/qiankun-vue3-tabsPage 网页演示网址: https://kuaifengle.github.io/qiankun-vue3-tabsPage-demo

Vue3.0 + qiankun.js 实现多tab标签页的路由切换功能主子应用都是vue3.0写的, 目前自己的公司也在用,后续会持续更新. 通过修改主应用的路由后利用子应用的updata方法来执行子页面$root的方法监听用initialState的变化来执行对微页面内部的路由跳转用keep-alive来缓存主应用和微应用的页面

Feb 17 '22 07:02 kuaifengle

地址：https://github.com/su4g/qiankun-angular13-Base

简介：主应用 - Angular13 子应用 - Angular13

Mar 30 '22 06:03 su4g

地址：https://github.com/qq253498229/qiankun-ng13-docker

简介：主应用 - Angular13 子应用 - Angular13

未使用single-spa，带Dockerfile以及docker-compose.yml

2023-04-20更新，升级到Angular15，原来的代码在ng13分支查看

Apr 29 '22 16:04 qq253498229

地址：https://gitee.com/github-26497262/micro-fe

简介：主要介绍三方依赖提取的方案。 vue-cli、webpack、vite 三个版本

Jul 05 '22 06:07 mayunbaba

地址：mat-react-pro演示地址

简介：支持页面缓存、页签操作

主应用：react18

子应用：react18、vue3、angular9

Jul 27 '22 14:07 Aaron52077

地址: https://github.com/xoptimal/qiankun-demo

简介

主应用(基于umi4构建)
微应用(基于umi3构建)
微应用2(基于react-create-app构建)
微应用3(react-create-app + router构建)

完成功能

挂载, 通信, 样式隔离, 错误处理

Aug 12 '22 00:08 xoptimal

主应用使用vite3+vue3，子应用使用vuecli +vue3

单纯vue3 qiankun的 demo文档说明

代码仓库地址

线上预览版本 http://vue.tuokecat.com/

大佬，写的很细，太贴心了，

Aug 23 '22 03:08 savelifeme

@savelifeme 最好能帮到你。

Aug 23 '22 04:08 aehyok

Micro Frontend Starter

Source code: https://github.com/yugasun/micro-frontend-starter

Feature

[x] Micro Framework using qiankun 🔥
[x] Monorepo using pnpm 🔥
[x] Develop & build using vite 🔥
[x] Support Vue.js, React.js, Svelte.js frameworks
[x] Auto develop and build commands.
[x] Support docker deployment.

Sep 06 '22 14:09 yugasun

一个使用 qiankun 支持的微前端应用 demo

主应用 vue2
子应用 angularjs + vue2

启动整个项目

monorepo，使用 pnpm workspace 管理
使用 pnpm 安装依赖
执行 pnpm start 启动整个项目

端口

主应用	子应用	端口
vue2		8080（默认）
	angularjs	7101
	vue2	7102

源代码：

https://github.com/12redcircle/qiankun-angularjs-migrate-demo

Sep 25 '22 05:09 ghost

地址

线上地址：https://maxlz1.github.io/micro-app-demos/qiankun-demo/vue3-main/ 仓库地址：https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/qiankun-demo

简介

主应用为vue3 + vite，子应用为vue2 + vue cli、react18 + webpack、react18 + vite。其中react18 + webpack会作为主应用动态加载vue2 + vue cli应用或react18 + vite应用。

其中vite子应用使用vite-plugin-qiankun进行接入。

功能列表

[x] 应用间通信（利用CustomEvent）
[x] 多个子应用共存
[x] CSS隔离
[x] 主子应用间跳转
[x] 嵌套子应用
[x] 资源预加载
[x] 子应用保活
[x] 接入vite子应用

Oct 14 '22 09:10 MAXLZ1

地址：react演示地址

简介：主应用react18、子应用react18都支持缓存

仓库地址是什么看看一看。

Nov 09 '22 09:11 RainManGO

地址：react演示地址简介：主应用react18、子应用react18都支持缓存

仓库地址是什么看看一看。

暂未开源，完善中

Nov 10 '22 14:11 Aaron52077

地址：react演示地址简介：主应用react18、子应用react18都支持缓存

仓库地址是什么看看。

暂未开源，完善中期待啊

Nov 13 '22 13:11 wjm0913

nuxtjs v2作为主应用接入qiankun的demo，附接入过程中的注意事项： nuxtjs-qiankun-demo

Nov 30 '22 07:11 CurrrryChen

地址：https://github.com/Shyam-Chen/Vue-Microfrontends

简介：

主應用 Vite 4 + Vue 3 + Vue Roter
子應用 Vite 4 + Vue 3 + Vue Roter
子應用 Vite 4 + Vue 3 + Vue Roter
路由都是 history 模式
子應用使用 vite-plugin-qiankun

Jan 04 '23 04:01 Shyam-Chen

@CurrrryChen 请问主应用使用nuxt算是SSR吗？（其实我就是想问qiankun的主应用现在到底支不支持SSR）

Jan 26 '23 08:01 athrunsun

地址：https://github.com/gongshun/qiankun-vue-demo

介绍：主子应用都是 vue 技术栈，在常规使用的基础上实现了：tab 标签页效果、应用之间的组件共享、依赖共享、子应用是 vite 构建的等效果（代码在不同的分支）我有两个vue应用A和B，用了qiankun这个微前端框架，A作为主应用，B作为子应用，主子应用本地启动时所在的端口号不一样，导致子应用的hmr不生效，请问该怎么处理

Mar 01 '23 12:03 xuanxuan321

qiankun
qiankun copied to clipboard

分享你的 demo [ Share your demo ]

地址

简介

🍔 基座

🍟 react子应用

🌮 vue子应用

问题1：

问题2：

问题3：

附

简介

完成功能

Micro Frontend Starter

Feature

启动整个项目

端口

源代码：

地址

简介

功能列表

qiankun qiankun copied to clipboard

分享你的 demo [ Share your demo ]

地址

简介

🍔 基座

🍟 react子应用

🌮 vue子应用

问题1：

问题2：

问题3：

附

简介

完成功能

Micro Frontend Starter

Feature

启动整个项目

端口

源代码：

地址

简介

功能列表

qiankun
qiankun copied to clipboard