微前端的入门初体验

时间:2021-7-3 作者:qvyue

我是使用 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 是真实访问路径。

最后

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。