micro-app【微前端实战】主应用 vue3 + vite 子应用 vue3+vite
micro-app 官方文档为
https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite
子应用
无需任何修改，直接启动子应用即可。
主应用
1. 安装微前端框架 microApp
npm i @micro-zoe/micro-app --save
2. 导入并启用微前端框架 microApp
src/main.ts
import microApp from '@micro-zoe/micro-app'
microApp.start()
3. 添加配置
vite.config.ts 的 vue 中添加配置
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => /^micro-app/.test(tag)
}
}
}),
4. 页面引入子应用
<micro-app name="childApp1" url="http://127.0.0.1:5174/" iframe></micro-app>
- name：必传参数，必须以字母开头，且不可以带特殊符号(中划线、下划线除外)
- url：必传参数，必须指向子应用的 index.html
- 子应用为 vite 时，需添加 iframe
5. 启动主应用
最终效果如下
