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,企业供应链,业务财务一体化老兵

促进软件开发及相关领域知识与创新的传播
京公网安备 11010502039052号 | 产品资质

评论