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. 启动主应用
最终效果如下