微前端的入门初体验

我是使用 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({
  publicPath: '/app1/',
  qiankun: {
    slave: {},Ï
  },
});

部署

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

我是属于 “主应用和微应用部署到同一个服务器” 的场景。

所以可以看到上面在子应用的配置中比 umi 文档多了个 publicPath 。
然后主应用生产环境下的 entry 是真实访问路径。

最后

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