qiankun:基于single-spa封装,开箱即用。
一、主应用接入
1、安装qiankun
TypeScript
npm i qiankun -S
2、主应用注册子应用
TypeScript
//children-app.ts
import { registerMicroApps } from 'qiankun';
import shared from "./shared";
registerMicroApps([
{
name: 'subapp',
entry: 'http://localhost:3001',
container: '#subapp',
activeRule: '#/subapp'
}
]);
//入口文件 main.ts
import './children-app';
3、在主应用的路由页面加载子应用
TypeScript
import { start } from 'qiankun';
onMounted(() => {
if (!window.qiankunStarted) {
window.qiankunStarted = true;
start();
}
})
二、子应用接入
1、安装
TypeScript
npm i qiankun vite-plugin-qiankun -S
2、修改打包配置项
TypeScript
//vite.config.ts
import qiankun from 'vite-plugin-qiankun';
export default defineConfig({
base: 'http://localhost:3001/', //base设为绝对路径
plugins: [
vue(),
qiankun('flow-graph', {
useDevMode: true
})
]
});
3、修改入口文件
TypeScript
//main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {
renderWithQiankun,
qiankunWindow
} from 'vite-plugin-qiankun/dist/helper';
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
createApp(App).use(router).mount('#app');
} else {
let app: VueApp<Element>;
renderWithQiankun({
mount(props) {
console.log('--mount');
app = createApp(App);
app
.use(router)
.mount(
(props.container
? props.container.querySelector('#app')
: document.getElementById('app')) as Element
);
},
bootstrap() {
console.log('--bootstrap');
},
update() {
console.log('--update');
},
unmount() {
console.log('--unmount');
app?.unmount();
}
});
}