qiankun微前端落地实践

qiankun微前端落地实践

---

背景

A项目集成了多条业务线的项目，但是共同使用一个git仓库和一套发布流水线，代码组织比较混乱。本次需要引入一个新的业务线，如果直接在A项目开发，将导致原项目更加复杂，更加混乱，故计划将这个项目单独发布，以微前端的方式嵌入A项目。

方案

微前端(qiankun)

1. 技术栈无关
   主框架不限制接入应用的技术栈，微应用具备完全自主权
2. 独立开发、独立部署
   微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
3. 独立运行时
   每个微应用之间状态隔离，运行时状态不共享

架构

步骤

1. 将现有A项目改造为主应用

   1. 安装qiankun

   2. 在主应用中注册微应用

      当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

      const ENV = getENV();
      const genActiveRule = hash => location => location.hash.startsWith(hash);
      let microApp = {
             
          name: "microApp",
          entry: {
             
              localhost: "//localhost:8080",
              test: "//test.com",
              online: "//online.com"
          }[ENV],
          container: "#microApp",
          activeRule: genActiveRule("#/microApp")
      };
      

   3. 微应用需要使用主应用的菜单和工具栏，故微应用在entry.vue文件中加载

      // entry.vue
      import {
             start} from 'qiankun';
      mounted() {
             
          // 启动微应用
          if (!window.qiankunStarted) {
             
              window.qiankunStarted = true;
              start();
          }
      }
      

   4. 主应用要预留子应用加载的路由入口，参见常见问题

      /**
       * @description 子应用的路由
       */
      {
             
          path: '/microApp/*',
          name: 'microApp',
          component: resolve => require(['../views/entry.vue'], resolve),
      },
      

   5. 404页面的配置

      首先不应该写通配符 * ，可以将 404 页面注册为一个普通路由页面，比如说 /404 ，然后在主应用的路由钩子函数里面判断一下，如果既不是主应用路由，也不是微应用，就跳转到 404 页面。

      const childrenPath = ['microApp'];
      router.beforeEach((to, from, next) => {
             
        if(to.name) {
              // 有 name 属性，说明是主应用的路