【微前端】micro-app搭建项目实战

主应用

1、安装依赖
npm i @micro-zoe/micro-app --save
2、初始化micro-app
import microApp from ‘@micro-zoe/micro-app’
microApp.start()

项目环境 vue3 + ts

主应用实例

// main.ts
1.引入插件
import microApp from ‘@micro-zoe/micro-app’
2.初始化插件
microApp.start();
3.在主应用中引入子应用插件格式
name
Desc: 应用名称
Type: string
Default: 必传参数
使用方式:
注意事项: 必须以字母开头，且不可以带特殊符号(中划线、下划线除外)
每个name都对应一个应用，当多个应用同时渲染时，name不可以重复。
当name的值发生变化时，会卸载当前应用并重新渲染。
url
Desc: 应用地址
Type: string
Default: 必传参数
使用方式:
url必须指向子应用的index.html，如：http://localhost:3000/ 或 http://localhost:3000/index.html
MicroApp会根据url地址自动补全子应用的静态资源，如js、css、图片等
当url的值发生变化时，会卸载当前应用并根据新的url值重新渲染。
<micro-app name='page9' style="width: 100px;height: 200px" url='http://localhost:8089/' disable-memory-router></micro-app>

子应用实例

修改 package.json、package-lock.json 两个文件中的name名称，让其与主应用注册组件name名称一致，不一致时子应用注入不到主应用中

可能遇到的问题

1.主应用控制台调试micro-app组件无存在？
解决：在vue.config.js文件中配置
chainWebpack: config => { config.module.tap(options => { options.compilerOptions = { ...(options.compilerOptions || {}), isCustomElement: (tag) => /^micro-app/.test(tag), }; return options }) }

2.子应用一定要支持跨域吗？
如果是开发环境，可以在webpack-dev-server中设置headers支持跨域。
devServer: { headers: { 'Access-Control-Allow-Origin': '*', }, },

更多配置请参考官方：https://micro-zoe.github.io/micro-app/