主应用
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/