文章序

开发中碰到的问题，需要在页面中嵌入其他项目的页面，考虑过 iframe(两个项目都是自己的且没有跨域，使用这种方法不是很优雅)，将项目文件迁移过来注册成组件通过 router-view 去嵌套(可行，但是费时费力)，于是便把目光投向了微前端，综合考量之后，选择使用 qiankun 来试试看
贴一下官方文档地址：https://qiankun.umijs.org/zh

主服务

服务引入文件

简单来讲就是需要引入 qiankun 提供的注册微服务方法，我这里使用的是 loadMicroApp，将 name，entry，container 参数配置好即可，注意需要主微服务使用相同的请求协议，不能一个用 https 一个用 http，会加载失败

  let qiankunObj = await loadMicroApp(
    {
      name: "microApp",
      entry: "http://127.0.0.1:8081/",
      container: "#microApp"
    },
    {
      sandbox: false,
      singular: true
    }
  );

路由

需增加路由映射微服务，比如主服务的路由是"/#/mainServiceApp"，则需要在主服务路由下增加子路由"microServiceApp/:id"，id 为子路由需要的参数，这样当路由匹配到"/#/mainServiceApp/microServiceApp:id"时会加载子路由相应页面，主服务可以通过更改路由匹配不同的微服务页面

  {
    path: "mainServiceApp",
    component: () => import("pages/mainServiceApp"),
    children: [
      {
        path: "microServiceApp/:id",
        component: () => import("pages/microServiceApp")
      }
    ]
  }

微服务

main.js

增加 bootstrap、mount、unmount 三个生命周期方法，详见官方文档

需要判断程序是否由微服务启动，如果是的话要加上

__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

替换webpack的全局公共路径