微前端技术栈 Vue3 + vite + ts
基座配置
基座采用是的 Vue3 + vite + ts，只负责导航的渲染和登录态的下发，为子应用提供一个挂载的容器div，
npm i qiankun
qiankun这个库只需要在基座引入，在main.ts 中注册子应用,为了方便管理，我们将子应用的配置都放在：/src/qiankun.js下
import {
registerMicroApps, addGlobalUncaughtErrorHandler, start } from 'qiankun';
import router from './router'
// 注册子应用
registerMicroApps([
{
// 子应用名称，name值必须与子应用vite.config.ts文件中plugins属性qiankun的第一个参数值一致
name: 'subApp',
// 默认会加载这个路径下的html，解析里面的js
entry: '//localhost:5050/',
// 加载的容器（微应用会显示到这个容器里面，一定要保证主应用中有这个容器）
container: '#subAppContainerVue3', // 和app.vue配置的节点一致
// 匹配的路由
activeRule: '/gosubsystem', // 访问：http://localhost:5174/juminronghe
props: {
mag: '我是主应用main', // 主应用向微应用传递参数
},
},
{
// 子应用名称，name值必须与子应用vite.config.ts文件中plugins属性qiankun的第一个参数值一致
name: 'lmsApp',
// 默认会加载这个路径下的html，解析里面的js
entry: '//localhost:5000/',
// 加载的容器（微应用会显示到这个容器里面，一定要保证主应用中有这个容器）
container: '#subAppContainerVue3', // 和app.vue配置的节点一致
// 匹配的路由
activeRule: '/lmsApp',
props: {
mag: '我是主应用main', // 主应用向微应用传递参数
router // 主路由下发到子路由，子应用路由跳转使用主应用路由实例跳转（需要跳转的路由要在主应用里注册）
},
}
],
{
beforeLoad: app => {
console.log('before load app.name====>>>>>', app.name)
},
beforeMount: [
app => {
console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
},
],
afterMount: [
app => {
console.log('[LifeCycle] after mount %c%s', 'color: green;', app.name);
}
],
afterUnmount: [
app => {
console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
},
],
});
// 启动 qiankun
// start({
// prefetch:'all', // 预加载
// sandbox: {
// experimentalStyleIsolation: true, // 开启沙箱模式,实验性方案
// },
// });
// 添加全局异常捕获
addGlobalUncaughtErrorHandler((event) => {
// console.error(event);
const {
message: msg } = event;
// 加载失败时提示
if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
// message.error("微应用加载失败，请检查应用是否可运行");
console.log("微应用加载失败，请检查应用是否可运行-乾坤插件是否正常")
}
});
然后在src/main.ts中引入
import './qiankun.js';
如何在主应用的某个路由页面加载微应用
必须保证微应用加载时主应用这个路由页面也加载了
主应用注册这个路由时给 path 加一个 *，注意：如果这个路由有其他子路由，需要另外注册一个路由，仍然使用这个组件即可
{
path: '/portal/*',
name: 'portal',
component: () => import('../views/Portal.vue'),
},
Portal.vue
<template>
<div id="subAppContainerVue3"></div>
</template>
<script lang="ts" setup name="merchantsRuquest">
// import start from "@/qiankun/index.js";
import {
start } from 'qiankun'
// import { registerApps } from '@/qiankun/index.js'
onMounted(()=>{
if (!window.qiankunStarted) {
window.qiankunStarted = true
// registerApps()
start({
sandbox: {
experimentalStyleIsolation: true // 样式隔离
}
})
}
})
// export default {
// mounted() {
// }
// }
</script>
主应用路由配置
{
path: '/lmsApp/*', // 注意和registerMicroApps 注册子应用的activeRule匹配
name: 'lmsApp',
meta: {
title: "子应用菜单管理",
icon: "car-outlined",
isFull: false,
isKeepAlive: true,
isHide: false
},
children: [
{
name: 'xxxxx',
path: '/lmsApp/xxxx/xxxxx',
component: () => import('@/views/portal.vue'),
meta: {
title: '子应用菜单下的二级菜单',
icon: '',
isKeepAlive: false
}
},
]
},
这样，基座就算配置完成了。项目启动后，子应用将会挂载到主应用中
子应用配置
安装vite-plugin-qiankun
npm i vite-plugin-qiankun --save-dev
修改vite.config.ts
import qiankun from 'vite-plugin-qiankun'引入乾坤插件
plugins: [ vue(), qiankun('app-vue3', { useDevMode: true }) ],使用
在子应用main.ts 里引用qiankun
import {
renderWithQiankun,
qiankunWindow,
type QiankunProps
} from 'vite-plugin-qiankun/dist/helper'
let app: any
const render = (container?: any, routers?: any) => {
app = createApp(App)
Object.keys(Icons).forEach((key) => {
app.component(key, Icons[key as keyof typeof Icons])
})
app.use(pinia)
app.use(print)
app.use(Antd)
app.use(directives)
app.config.globalProperties.$routers = routers
app.use(router).mount(container ? container.querySelector('#app') : '#app')
}
const initQianKun = () => {
renderWithQiankun({
mount(props) {
// localStorage.lalal = 111111
console.log(props.router, '获取主应用传递数据')
sessionStorage.latoutStatus = false
const {
container, router } = props
render(container, router)
},
bootstrap() {
},
unmount() {
app.unmount()
},
update: function (props: QiankunProps): void | Promise<void> {
throw new Error('Function not implemented.')
}
})
}
// console.log(qiankunWindow.__POWERED_BY_QIANKUN__, '90')
qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render()
由于路由模式为history，需要匹配子应用的入口规则，修改src/router/index
import {
qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
const router = createRouter({
history: createWebHistory(
qiankunWindow.__POWERED_BY_QIANKUN__
? '/lmsApp/'
: '/'
),
routes
})
至此，本地运行的所有配置全部修改完