qiankun按需加载微应用方案

utils/qiankun.js

import { addGlobalUncaughtErrorHandler, loadMicroApp } from 'qiankun';

export const micro_conf = [
  {
    name: 'assistant', // 必须与微应用注册名字相同
    entry: hostMap('http://localhost:7106/assistant/'), // 入口路径，开发时为微应用所启本地服务，上线时为微应用线上路径
    container: '#sub-container1', // 微应用挂载的节点
    activeRule: '/main/assistant', // 路由匹配规则
    config: {
      title: '多方协管'
    }
  },
  {
    name: 'safe',
    entry: hostMap('http://localhost:7206/safe/'),
    container: '#sub-container2',
    activeRule: '/main/safe',
    config: {
      title: '安全监管'
    }
  }
];

addGlobalUncaughtErrorHandler((event) => {
  console.error(event);
  const { message: msg } = event;
  if (msg && msg.includes('died in status LOADING_SOURCE_CODE')) {
    console.error('微应用加载失败，请检查应用是否可运行');
  }
});

const lifeCycles = {
  beforeLoad: [(app) => console.log('before load', app)],
  beforeMount: [(app) => console.log('before mount', app)],
  afterUnmount: [(app) => console.log('before unmount', app)]
};

function getProps() {
  return {
    initialState: {}
  };
}

// 缓存应用实例
const microList = new Map([]);
// 当前应用配置
let current;
export async function loadMicroAppOnce(to) {
  console.log('>>>to', to);

  const conf = micro_conf.find(
    (item) => ('/main' + to.path).indexOf(item.activeRule) !== -1
  );
  if (!conf) return;

  if (current && current.activeRule === conf.activeRule) {
    console.log('>>>未切换应用', current);
    return;
  }

  const cacheMicro = microList.get(conf.activeRule);

  if (cacheMicro) {
    console.log('>>>已缓存应用', cacheMicro);
    return;
  }

  const micro = loadMicroApp(
    {
      ...conf,
      props: getProps(),
      lifeCycles
    },
    {
      sandbox: true, // 可选，是否开启沙箱，默认为 true。默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。
      singular: false,
      getPublicPath: (entry) => {
        console.log('>>>injectPublicPath', entry);
        return entry;
      }
    }
  );

  await micro.loadPromise;

  console.log('>>>加载应用', micro, micro.getStatus());
  if (micro.getStatus() === 'BOOTSTRAPPING') {
    microList.set(conf.activeRule, micro);
    current = conf;
  } else {
    console.log('>>>加载失败，将卸载应用以待下次重试', micro.getStatus());
    current = null;
    microList.delete(conf.activeRule);
    typeof micro.unmount === 'function' && micro.unmount();
  }
}

subContainer.vue

<template>
  <div class="sub-container-wrap">
    <div
      v-for="micro in micro_conf"
      :key="micro.name"
      :id="micro.container.replace('#', '')"
      v-show="
        $route.path &&
        ('/main' + $route.path).indexOf(micro.activeRule) !== -1
      "
      class="sub-container-box"
    ></div>
  </div>
</template>

<script setup>
import { loadMicroAppOnce, micro_conf } from '@/utils/qiankun';
const route = useRoute();

watch(
  () => route.path,
  () => loadMicroAppOnce(route),
  { immediate: true }
);
</script>
<style lang="scss" scope>
.sub-container-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: inline-block; // 解决子元素添加 margin-top，父元素也会受影响，也像添加了 margin-top一样下移问题
}

.sub-container-box {
  height: 100%;
  > div {
    height: 100%;
  }
}
</style>