微前端在得物客服域的实践 / 那么多微前端框架，为啥我们选 Qiankun + MF

import { registerMicroApps } from 'qiankun';
registerMicroApps(  [    {      name: 'app1',      entry: '//localhost:8080',      container: '#container',      activeRule: '/react',      props: {        name: 'kuitos',      },    },    {      name: 'app2',      entry: '//localhost:8081',      container: '#container',      activeRule: '/vue',      props: {        name: 'Tom',      },    },  ],  {    beforeLoad: (app) => console.log('before load', app.name),    beforeMount: [(app) => console.log('before mount', app.name)],  },);

// 手动加载微应用方法封装const loadMicroAppFn = (microApp) => {  const app = loadMicroApp(    {      ...microApp,      props: {        ...microApp.props,        // 下发给微应用的数据        microFn: (status) => setMicroStatus(status)      },    },    {      sandbox: true,      singular: false    }  );    return app;}

// 为每个微应用提供一个挂载的容器节点：<template>  <div class="tabs-view">    <div class="tabs-view-content tabs-view-container">      <template v-if="microApps && microApps.length">        <div          v-for="micro in microApps" :key="micro.name"          :id="micro.id"          v-show="currentPath && currentPath.startsWith(`${micro.key}`)"        ></div>      </template>    </div>  </div></template>
<script lang="ts">import { defineComponent, computed, toRefs, watch, ref } from 'vue'import { useRoute } from 'vue-router'import { useStore } from 'vuex'
export default defineComponent({  name: 'Micro-content',  components: {  },  props: {    currentMenu: {      type: String,      default: ''    }  },  setup(props) {    const route = useRoute()    const store = useStore()    // 微应用注册表    const microApps = computed(() => store.getters.microAppsList).value    const currentPath = ref(route.path)
    watch(      () => route.path,      (to, _) => {        currentPath.value = route.path      },      { immediate: true }    )
    return {      route,      spin,      microApps,      currentPath    }  }})</script>

<template>  <div class="app-content">    <a-config-provider :locale="zhCN" prefixCls="basic">      <router-view v-if="isShowViews" v-slot="{ Component }">        <keep-alive v-if="isKeppAlive">          <component :is="Component" />        </keep-alive>        <component :is="Component" v-else />      </router-view>    </a-config-provider>  </div></template>

import './public-path'import { createApp } from 'vue'import App from './App.vue'import router, { setupRouter, destroyRoute } from '@/router'import { setupStore } from '@/store'import { isChildApp } from '@/utils/env'
let app: any = nullfunction render(props) {  app = createApp(App)  // 挂载vuex状态管理  setupStore(app, props)  // 挂载路由  setupRouter(app)  // 路由准备就绪后挂载APP实例  router.isReady().then(() => {    app.mount(document.getElementById('miro-app'))  })}
// 独立运行时if (!isChildApp()) {  render({})}
// 暴露主应用生命周期钩子export async function mount(props: any) {  render(props)}
export async function bootstrap() {  console.log('vue app bootstraped')}
// 销毁生命周期export async function unmount(props: any) {  app.unmount()  app._container.innerHTML = ''  destroyRoute()  app = null}

<template>  <a-config-provider :locale="zhCN">    <router-view v-slot="{ Component }">      <keep-alive v-if="isKeepAlive">        <component :is="Component" />      </keep-alive>      <component :is="Component" v-else />    </router-view>  </a-config-provider></template>

// 例如下面这个例子// global.js中定义一个全局变量var globalMicroApp = 'micro-name'// index.html引入这个global.js<script src="global.js"></script>
// global.js中定义一个全局变量var globalMicroApp = 'micro-name'window. globalMicroApp = globalMicroApp// index.html引入这个global.js<script src="global.js"></script>

const loadMicroAppFn = (microApp) => {  const app = loadMicroApp(    {      ...microApp,      props: {        ...microApp.props      },    },    {      sandbox: true,      singular: false,      // 指定部分特殊的动态加载的微应用资源（css/js) 不被 qiankun 劫持处理      excludeAssetFilter: (url) => {        return !!(url.indexOf("https://xxx.com/xxx") !== -1);      },    }  );
  return app;};

import { initGlobalState, MicroAppStateActions } from 'qiankun';
// 初始化 stateconst actions: MicroAppStateActions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {  // state: 变更后的状态; prev 变更前的状态  console.log(state, prev);});actions.setGlobalState(state);actions.offGlobalStateChange();

// 从生命周期 mount 中获取通信方法，使用方式和 master 一致export function mount(props) {  props.onGlobalStateChange((state, prev) => {    // state: 变更后的状态; prev 变更前的状态    console.log(state, prev);  });
  props.setGlobalState(state);}

// mian.ts中只能导出qiankun生命周期const { bootstrap, mount, unmount } = await import('./bootstrap')export { bootstrap, mount, unmount }

.app-main {  font-size: 14px;}
div[data-qiankun-react16] .app-main {  font-size: 14px;}

postcss:{    plugins:[require('postcss-plugin-namespace')('.basic-project',{ ignore: [ '*'] })]}

.app-main {  font-size: 14px;}
.basic-project .app-main {  font-size: 14px;}

// 修改前.ant-menu-item {  text-align: center;  padding: 10px;}
// 修改后.basic-menu-item {  text-align: center;  padding: 10px;}