微前端的入门初体验

我是使用 umi ，所以直接使用了配套的 qiankun 插件 @umijs/plugin-qiankun 。

主应用配置

export default defineConfig({
  qiankun: {
    master: {
      //注册子应用信息
      apps: [
        {
          name: "app1", // 唯一 id
          entry:
            process.env.NODE_ENV === "development"
              ? "//localhost:8088" // 本地 html entry
              : "//xxx.com/index.html", // 线上 html entry
        },
      ],
    },
  },
  //装载子应用
  routes: [
    // 配置微应用 app1 关联的路由
    { path: '/app1', microApp: 'app1' },
  ],
});

这里我本地开发时，指定的子应用本地服务端口号是8088，所以最好在子应用中指定应用启动的具体端口号，在 .env 文件中指定 PORT 。

PORT=8088

子应用配置

export default defineConfig({
  qiankun: {
    slave: {},
  },
});

部署

umi 的文档里是没有具体讲如何部署到服务器，这时候需要去 qiankun 官网查看。

插件构建期配置子应用

可以看到上面主应用的配置，就是 entry 写上子应用的真实访问路径就可以了。

动态配置子应用

上面主应用配置是在插件构建期配置子应用的，写入的是一个 string，所以子应用访问的路径是死的，不可变的。
那如何动态配置子应用呢？（umi 文档内有写，但感觉不是一眼能明白的）

主应用 .umirc.ts 内的 qiankun 配置需要保留这一块。（这是 umi 文档内没提到的）

  qiankun: {
    master: {},
  },

子应用的注册信息是在 src/app.ts 内配置。可以调用接口动态获取（ 也可以直接写入对象）

export const qiankun = fetch('/config').then(({ apps }) => ({
    apps,
  }));

其他

如果你的子应用部署在域名的子路径上，记得加 publicpath 配置。

最后

我使用的目的有，用来将项目进行拆分解耦。还有就是，对前台进行动态配置的后台管理系统可以直接对应多个的前台，不需要再去重复。

配置跟着文档走很简单，然后暂时也没用到父子应用通讯这块内容，纠结了很久。最后还是选择先简单的写一下，之后有机会不断补充。