Primevue 项目中使用 qiankun
今天遇到需要在 Primevue 的 sakai 项目中使用 qiankun, 做微应用的集成。 下面是我实践的步骤。
在 main.js 里头引入:
复制代码
在正常的 vue 页面里头这样子写入即可访问:
复制代码
附注: 本文不涉及菜单如何配置, 按照正常的方式进行菜单配置即可。注意把 experimentalStyleIsolation: false 设置为 false, 否则可能会导致子应用的页面的行为产生异常。
本文字数:674 字
阅读完需:约 2 分钟
今天遇到需要在 Primevue 的 sakai 项目中使用 qiankun, 做微应用的集成。 下面是我实践的步骤。
在 main.js 里头引入:
import { registerMicroApps,runAfterFirstMounted,addGlobalUncaughtErrorHandler } from 'qiankun';
registerMicroApps( [{
name: 'app1',
entry: 'https://my.mybricks.world/mfs/project/433644610379845/434037371457605/434037371457605.html',
container: '.layout-main-container',
activeRule:'#'
}], {
beforeLoad: [app => {
return Promise.resolve();
}]
}
)
runAfterFirstMounted(() => {
console.log('子应用加载完毕')
})
/**
2. 补取异常
*/
addGlobalUncaughtErrorHandler((event) => {
const { message } = event;
// 加载失败时提示
if (message && message .includes("died in status LOADING_SOURCE_CODE")) {
console.log("微应用加载失败_"+msg);
}
});
在正常的 vue 页面里头这样子写入即可访问:
<script setup>
import { onMounted } from 'vue';
import { registerMicroApps, start } from "qiankun";
onMounted(() => {
if (!window.qiankunStarted) {
window.qiankunStarted = true;
start({
prefetch: true, // 开启预加载
sandbox: {
experimentalStyleIsolation: false,
},
});
}
});
</script>
附注: 本文不涉及菜单如何配置, 按照正常的方式进行菜单配置即可。注意把 experimentalStyleIsolation: false 设置为 false, 否则可能会导致子应用的页面的行为产生异常。
与一只鸟生活在杭州 2023-01-19 加入
企业ERP,企业供应链,业务财务一体化老兵
促进软件开发及相关领域知识与创新的传播
评论