micro-app【微前端系列教程】项目搭建

micro-app 官方文档
https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite

以主应用 vue3 + vite ，子应用 vue3+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. 启动主应用

最终效果如下