写点什么

Primevue 项目中使用 qiankun

作者:麦兜
  • 2024-02-06
    浙江
  • 本文字数:674 字

    阅读完需:约 2 分钟

今天遇到需要在 Primevue 的 sakai 项目中使用 qiankun, 做微应用的集成。 下面是我实践的步骤。


  1. 在 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); }});
复制代码
  1. 在正常的 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,企业供应链,业务财务一体化老兵

评论

发布
暂无评论
Primevue项目中使用qiankun_麦兜_InfoQ写作社区