使用微前端方案 qiankun

蚂蚁的微前端构架 qiankun

github地址：https://github.com/umijs/qiankun

参考项目

使用统一后台脚手架项目，比如ant design vue pro，在layout中创建创建 qiankunLayout,空白内容部分区域显示子程序。参考项目：https://github.com/hql7/wl-micro-frontends (感谢大神分享的项目)

看过参考项目后帮助我进一步了解了 qiankun(乾坤), 以下是参考项目内容

微前端主应用与子应用如何构建
主、子，各应用间动态通信(动态，各应用间实时监听，同步数据)
主应用资源下发至子应用
异步注册(主应用异步获取子应用注册表并将子应用对应的路由下发至子应用)
异步路由(使用应用间通信，通知子应用路由数据，子应用在内部 addRoutes 异步插入路由)
各应用间路由基础管理
公共资源处理

脚手架中加入 qiankun

主程序组件qiankunLayout初始化乾坤后判断用户所属子程序并加载子程序，之后给子程序传入主程序中的组件、通用工具、用户信息等供子程序使用。

<!-- basic-layout 中空白内容区域 -->
    <a-layout-content
        :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }"
      >
        <multi-tab v-if="multiTab"></multi-tab>
        <transition v-if="!isSubApp" name="page-transition">
          <route-view />
        </transition>
        <div v-else>
          <!-- 子应用  -->
          <div v-if="loading">loading</div>
          <div id="subapp-viewport"></div>
          <div class="subapp-container" v-html="content" />
        </div>
      </a-layout-content>

<!-- qiankunLayout demo代码 -->
<template>
  <basic-layout :isSubApp="isSubApp" :loading="appLoading" :content="appContent" />
</template>

<script>
import {
  registerMicroApps,
  runAfterFirstMounted,
  setDefaultMountApp,
  start,
  initGlobalState
} from 'qiankun';
import { mapGetters } from 'vuex';
import BasicLayout from '@/layouts/BasicLayout';
import VueRender from "../VueRender";
const genActiveRule = routerPrefix => {
  return location => location.pathname.startsWith(routerPrefix);
};

export default {
  name: 'Overview',
  components: {
    BasicLayout
  },
  data() {
    return {
      VueRender,
      appLoading: false,
      appContent: ''
    };
  },
  computed: {
    ...mapGetters(['apps', 'isSubApp'])
  },
  created() {
    this.loadSubApp();
  },
  methods: {
    loadSubApp() {
      /**
       * Step1 初始化应用（可选）
       */
      this.VueRender({loading: true});
      /**
       * Step2 注册子应用
       */
      registerMicroApps(
        [
          {
            name: 'vue',
            entry: '//localhost:7101',
            // render: this.render,
            container: '#subapp-viewport',
            activeRule: genActiveRule('/vue')
          },
        ],
        {
          beforeLoad: [
            app => {
              console.log('[LifeCycle] before load %c%s', 'color: green;', app.name);
            }
          ],
          beforeMount: [
            app => {
              console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
            }
          ],
          afterUnmount: [
            app => {
              console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
            }
          ]
        }
      );

      const { onGlobalStateChange, setGlobalState } = initGlobalState({
        user: 'qiankun'
      });

      onGlobalStateChange((value, prev) =>
        console.log('[onGlobalStateChange - master]:', value, prev)
      );

      setGlobalState({
        ignore: 'master',
        user: {
          name: 'master'
        }
      });

      /**
       * Step3 设置默认进入的子应用
       */
      setDefaultMountApp('/vue');

      /**
       * Step4 启动应用
       */
      start({
        // sandbox: { strictStyleIsolation: true },
        // singular: false
      });

      runAfterFirstMounted(() => {
        console.log('[MainApp] first app mounted');
      });
    }
  }
};
</script>

主程序中包含权限管理系统管理路由生成等功能，不同项目的业务可以放到子程序中实现。实现主程序登录完成后根据不同用户载入子程序，这样主程序就可以统一进行代码管理。

结语

本文章只提供了一种简单的解决思路，具体项目中不同的项目会有不同的登录注册页面，不同的页面功能和风格都有待解决，具体实现代码等待后续文章中提供，希望有大佬能在留言板中给出更好的建议或者思路。