因业务需要搭建一套微前端服务, 阅读文档时发现qiankun与vite无法一起使用,需要引入额外插件才可以一起使用,在这里记录下
qiankun基座配置
1.修改index.html中div的id,并在main.js中修改挂在函数
//index.html
<div id="qiankunBaseApp"></div>
//main.js
createApp(App)
.mount('#qiankunBaseApp')
2.main.js启动qiankun
import {
registerMicroApps, start } from 'qiankun';
const apps = [
{
name: 'qiankunPiggy',
entry: '//localhost:5392',
fetch,
container: '#qiankunPiggy',
activeRule: '/qiankun-piggy',
}
]
registerMicroApps(apps);
start({
prefetch: false // 取消预加载
});
3.在相应位置设置子应用挂载div
<router-view></router-view>
<div id="qiankunPiggy"></div>
4.接受子应用路由信息并注册
这里我自己写的可能有问题,暂时还没有发现
//main.js
import actions from '../../utils/qiankunUtil/actions'
const router = useRouter()
//将子应用路由加入基座路由中
actions.onGlobalStateChange((state, prevState) => {
if (state.