micro-zoe/micro-app-demo

micro-app 案例

简介

micro-app-demo 作为 micro-app 的案例仓库，举例了 react, vue, angular, nextjs, nuxtjs, vite 如何作为主应用和子应用接入微前端，并在尽可能改动少量的代码的情况下做出尽可能完善的功能。

micro-app-demo中所有项目都是使用官方脚手架创建的，它们足够精简，你完全可以将其中的demo作为基础进一步开发自己的项目。

目录结构

.
├── child_apps
│   ├── angular11        // 子应用 angular11 (history路由)
│   ├── nextjs11         // 子应用 nextjs11 (history路由)
│   ├── nuxtjs2          // 子应用 nuxtjs2 (history路由) 
│   ├── react16          // 子应用 react16 (history路由)
│   ├── react17          // 子应用 react17 (hash路由)
│   ├── sidebar          // 子应用 sidebar，公共侧边栏
│   ├── vite-vue3        // 子应用 vite (hash路由)
│   ├── vue2             // 子应用 vue2 (history路由)
│   └── vue3             // 子应用 vue3 (history路由)
├── main_apps
│   ├── angular11        // 主应用 angular11 (history路由)
│   ├── nextjs11         // 主应用 nextjs11 (history路由)
│   ├── nuxtjs2          // 主应用 nuxtjs2 (history路由)
│   ├── react16          // 主应用 react16 (history路由)
│   ├── react17          // 主应用 react17 (history路由)
│   ├── vite-vue3        // 主应用 vite (history路由)
│   ├── vue2             // 主应用 vue2 (history路由)
│   └── vue3             // 主应用 vue3 (history路由)
├── package.json
└── yarn.lock

19 directories, 5 files

开始

1、安装依赖

yarn bootstrap

如果失败，建议单独进入子目录执行yarn安装。

2、运行项目

各主应用都监听了3000端口，所以只能同时启动一个主应用，而子应用端口各不相同，可以同时启动。

1、启动 react16 主应用

yarn dev:main-react16

访问：http://localhost:3000/main-react16

此时分别运行 main_apps/react16 以及 child_apps 文件夹下的所有子应用。

2、启动 react17 主应用

yarn dev:main-react17

访问：http://localhost:3000/main-react17

此时分别运行 main_apps/react17 以及 child_apps 文件夹下的所有子应用。

3、启动 vue2 主应用

yarn dev:main-vue2

访问：http://localhost:3000/main-vue2

此时分别运行 main_apps/vue2 以及 child_apps 文件夹下的所有子应用。

4、启动 vue3 主应用

yarn dev:main-vue3

访问：http://localhost:3000/main-vue3

此时分别运行 main_apps/vue3 以及 child_apps 文件夹下的所有子应用。

5、启动 vite 主应用

yarn dev:main-vite

访问：http://localhost:3000/main-vite

此时分别运行 main_apps/vite-vue3 以及 child_apps 文件夹下的所有子应用。

6、启动 angular11 主应用

yarn dev:main-angular11

访问：http://localhost:3000/main-angular11

此时分别运行 main_apps/angular11 以及 child_apps 文件夹下的所有子应用。

7、启动 nextjs11 主应用

yarn dev:main-nextjs11

访问：http://localhost:3000/

此时分别运行 main_apps/nextjs11 以及 child_apps 文件夹下的所有子应用。

8、启动 nuxtjs2 主应用

yarn dev:main-nuxtjs2

访问：http://localhost:3000/

此时分别运行 main_apps/nuxtjs2 以及 child_apps 文件夹下的所有子应用。

效果如下：

补充

• 1、如果你在安装依赖或启动项目时发生错误，可以尝试单独进入每个项目执行操作。
• 2、因为每个主应用都有侧边栏，一次次写太麻烦，所以将侧边栏单独分离出来作为子应用，也就是 child-sidebar，实际项目中不需要这样做，侧边栏一般放到主应用中。
• 3、因为nextjs和nuxtjs的基础路由是写死的，而child-nextjs11，child-nuxtjs2分别嵌入了多个主应用，每个主应用下的基础路由都不同，所以单独为每个主应用单独打包构建不同版本（main_apps/nextjs11, main_apps/nuxtjs2略微不同，它们单独绑定了端口，处于根目录，可以共用一个版本）。

micro-app-demo's Issues

主应用可以在非引用子应用的页面给子应用发数据吗

示例都是一级菜单，请问下我子应用的二级菜单怎么写到主应用左侧一起的

子项目的导航怎么写到主应用的左边菜单的，现在切换子应用的两个菜单，是不能切换的，主子应用都是history模式

要实现这种路由，请问下怎么配置的

新增纯js案例加载出错

问题描述

纯js案例没有加载出来

复现步骤

1.运行子应用：cd 当前路径micro-app-demo/child_apps/purejs && npm run dev
2. 运行父应用：cd yarn dev:main-react16
3. 打开 http://localhost:3000/main-react16/app-purejs

上传截图

复现仓库

切换到该仓库的purejs分支

需要说明Node 版本， webpack或者其他全局依赖的版本，我本地都是最高版本，启动不起来，单个子应用也起不来

子应用是 vite项目 ，路由支持history模式么

Vite 子应用，发布时必须指定baseurl 吗？

Vite 子应用，发布时必须指定baseurl 吗？不能相对路径？

micro app 目前不支持 vite3项目吗？报错

Uncaught TypeError: Failed to resolve module specifier "/child/vite2/node_modules/.vite/deps/vue.js?v=e77709cf". Invalid relative url or base scheme isn't hierarchical.

start 函数配置 destory true，切换子应用，内存持续增加

问题表现：
配置 destory: true 后，连续切换子应用，内存持续增加。
重现步骤：
测试1：任务管理器

1. 在 main_apps/react16/src/index.js 配置 start 函数，增加 destroy: true, 配置。
2. yarn dev:main-react16。
3. 访问首页，不打开控制台，打开浏览器任务管理器。
4. 连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用，循环8次，每次循环结束后等待15s GC，然后查看内存。
   

测试2：控制台内存查看

1. 打开控制台的内存 tab，点击收集垃圾，选择时间线配置
2. 记录，连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用，循环4次。
3. 点击收集垃圾，然后停止记录
   

测试3： 配置 destory: false

1. 在 main_apps/react16/src/index.js 配置 start 函数，增加 destroy: false, 配置。
2. 打开控制台的内存 tab，点击收集垃圾，选择时间线配置
3. 记录，连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用，循环4次。
4. 点击收集垃圾，然后停止记录
   

另外，在 destory: true模式下，第二次进入 react16, react 17 子应用报错，这又是另外的问题了。

angular 13引入micro-app 报错

1. If 'micro-app' is an Angular component, then verify that it is part of this module.
2. If 'micro-app' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
   

vite+react18 demo?

demo示例中, vite子应用的元素设置背景图, 会出现, 子应用的背景图地址的端口用的是基座应用的端口, 导致图片404

react作为子应用时，在入口文件中如何跳转路由

//main.tsx或者index.tsx中
const handleMicroData = () => {
const navigate = useNavigate();//报错，原因是需要在组件中使用
const location = useLocation();//报错
if (window.eventCenterForAppSource) {
const dt = window.eventCenterForAppSource.getData();
console.log("微应用【app-source】 getData:", dt);
if (dt.path && typeof dt.path === "string") {
console.log("子应用得到的路由-初始", dt.path, location.pathname);
dt.path = dt.path.replace(/^#/, "");
if (dt.path && dt.path !== location.pathname) {
debugger;
navigate(dt.path as string);
}
}
window.eventCenterForAppSource.addDataListener(
(data: Record<string, unknown>) => {
console.log("微应用【app-source】addDataListener:", data);
if (data.path && typeof data.path === "string") {
console.log("子应用得到的路由", data.path, location.pathname);
data.path = data.path.replace(/^#/, "");
if (data.path && data.path !== location.pathname) {
debugger;
navigate(dt.path as string);
}
}
}
);
setTimeout(() => {
window.eventCenterForAppSource.dispatch({ myname: "appSource" });
}, 3000);
}
};

示例中的child_apps>vite3+vue3判断微前端环境的变量写错了

能提供keepalive的例子吗？

当前在子应用内部的keepalive可以正常（实验了vue2、vue3、vite-vue3）
当切换子应用后，keepalive失效。
如果在micro-app中增加keepalive，切换子应用都无变化了。

能否提供一个例子呢？

因为每个主应用都有侧边栏，一次次写太麻烦，所以将侧边栏单独分离出来作为子应用，也就是 child-sidebar，实际项目中不需要这样做，侧边栏一般放到主应用中。

侧边栏如果放在主应用中，进入基座无法和子应用通信呀 求解答

angular13项目，子应用之间切换，ngOnDestroy生命周期没有触发

Angular CLI: 13.2.6
Node: 16.14.2
Package Manager: npm 8.5.0
OS: darwin arm64

Angular: 13.2.7
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.6
@angular-devkit/build-angular   13.2.6
@angular-devkit/core            13.2.6
@angular-devkit/schematics      13.2.6
@angular/cdk                    13.2.6
@angular/cli                    13.2.6
@schematics/angular             13.2.6
rxjs                            7.5.6
typescript                      4.5.5

如题，子路由之间切换未触发当前页面生命周期，导致页面上popover组件、订阅事件等无法正常卸载，导致切回子应用后，页面显示错误。在官方angular11项目中也可以复现
注：子应用卸载的时候 unmount 生命周期里app.destroy()会报错，屏蔽掉了

请问微前端多个子仓库是怎么管理的

我看每个项目的文件夹下都有.gitignore文件，是每个微前端都是一个仓库吗？这个demo中的仓库是怎么管理的

能说明下node版本么？不同的包版本依赖不一样

demo中vite-vue3基座打包后的问题

1、vite-vue3基座打包后需要修改路径才可以运行；
2、打开vite子应用控制台报错
/Uncaught TypeError: Failed to resolve module specifier "/child/vite/node_modules/vite/dist/client/env.mjs". Invalid relative url or base scheme isn't hierarchical.
app-vite:1 Uncaught TypeError: Failed to resolve module specifier "/child/vite/node_modules/.vite/vue.js?v=74605dfe". Invalid relative url or base scheme isn't hierarchical./
请问作者第二个问题怎么解决呢

microApp.start()后window.__MICRO_APP_ENVIRONMENT__ 获取不到，是undefined，是怎么回事呢？

子应用使用饿了么 UI 组件库中的 el-select,el-table 中 filter 属性在滚动时的定位问题

基座: vue3+vite5+micro-app:1.0.0-rc.6

子应用使用饿了么 UI 组件库中的 el-select,el-table 中 filter 属性的四种情况表现:

情况 1，基座是 frame 沙箱，micro-app 标签设置成 position: relative

vue2 表现：el-select 正常，el-table 的 filter 有问题(点击展示后定位问题出错，第二次点击时发生)

vue3 表现正常

情况 2，基座是 frame 沙箱，micro-app 标签设置成 position: unset

vue2 表现：el-select,el-table 的 filter 滚动浏览器时，弹土框均跟随滚动

vue3 表现：el-select,eltable 的 filter 液动浏览器时，弹土框均跟随滚动

情况 3，基座是 with 沙箱，micro-app 标签设置成 position: unset

vue2 表现正常

vue3 略

情况 4，基座是 with 沙箱，micro-app 标签设置成 position: relative

vue2 表现：el-select 正常，el-table 的 filter 有问题(点击展示后定位问题出错，第二次点击时发生)

vue3 略

截图如下~

vue2

vue3

Demo地址：https://github.com/jiuyuer/micro-app-el-roll

请问main app及child app可支援Angular 13?

请问main app及child app可支援Angular 13?
我实作出来不work?

基座为vue2,子应用为vite+vue3。第一次加载子应用页面展示没问题，销毁子应用到其他页面，再次加载vite+vue3子应用，页面没有暂示

子应用启动的是vue3-vite 导致白屏问题（主应用也是vite-vue3）

子应用使用用uniapp，主应用使用vue能否兼容？

子应用报socket错误

主应用和子应用都是vue hash模式，能提供demo吗

安装依赖npm run bootstrap报错

执行npm run bootstrap时候报错 An unexpected error occurred: "https://registry.npm.taobao.org/@jsdevtools/coverage-istanbul-loader/download/@jsdevtools/coverage-istanbul-loader-3.0.5.tgz: certificate has expired"

是不是不支持webpack5 好像没在demo找到 打包后子应用无法获取到 window.microApp

micro-app-demo案例中的左侧导航选中高亮消失了

官方demo里面，子应用切换，左侧导航高亮是显示的

但是点击了某个子应用里面的路由后，左侧导航的高亮不见了，请问怎么处理

都不显示了

client.ts:69 [vite] failed to connect to websocket (SyntaxError: Failed to construct 'WebSocket': The URL 'ws://:/vite-vue3-micro/' is invalid.).

baseroute可以动态传进去吗

Angular12使用数据绑定baseroute会报错：
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'xxxxx'

nuxt子应用中，在asyncData或者fetch钩子函数中获取不到URL的query

使用实例代码 https://github.com/micro-zoe/micro-app-demo 测试

描述：

1. 主应用和子应用均为Nuxt2应用
2. URL: http://localhost:3000/app-nuxtjs2/?type=123
3. asyncData函数中 query为 {}
4. 如果单独打开子应用页面如http://localhost:4003/app-nuxtjs2/?type=123 ，可以获取到query

Ext.js（或者类似这种前端框架的JS）作为主应用，Vue.js作为子应用案例有无

添加shadowDOM属性无法渲染

主应用、子应用都是vite+vue3，micro-app标签添加shadowDOM属性，白屏无法渲染。
报警告：

runtime-core.esm-bundler.js:6620 [Vue warn]: Failed to mount app: mount target selector "#vite-app" returned null.
warn2 @ runtime-core.esm-bundler.js:6620