qiankun微前端初探

长期维护文档：qiankun微前端实践

实践项目地址

1. umijs脚手架基座
2. umijs脚手架微应用
3. create-react-app脚手架基座和微应用

Changelog

2020.12.14

feat

1. 新增create-react-app脚手架接入实践方案
2. 新增create-creat-app和umijs脚手架混合接入实践方案
3. 新增实践项目地址

一：脚手架均为umijs

参考

1. 官方文档：@umijs/plugin-qiankun

2. ant design pro 如何使用 qiankun 做微前端（上

说明

下述应用脚手架均为umijs

子应用

1. 下载qiankun插件

yarn add -D @umijs/plugin-qiankun

2. 配置

// config/config.ts

export default {
  // ...... 其他配置
  qiankun: {
    slave: {}
  },
}

3. 修改pages/document.ejs

- <div id="root">
+ <div id="<%= context.config.mountElementId %>">

4. 启动

yarn start

主应用

1. 下载qiankun插件

yarn add -D @umijs/plugin-qiankun

2. 注册子应用

// config/config.ts

export default {
  // ...... 其他配置
  qiankun: {
    master:
    {
      apps: [
        {
          name: 'app1', // 唯一 id
          entry: '//localhost:8010', // html entry
        },
      ],
    }
  },
}

3. 装载子应用

const routes = [
  {
    path: '/',
    component: '../layouts/BasicLayout',
    routes: [
      {
        path: '/',
        name: 'index',
        component: './Index',
        exact: true,
        title: '首页',
      },
      // 装载app1
      {
        path: '/app1',
        microApp: 'app1'
      },
      {
        component: './404',
      },
    ],
  },
  {
    component: './404',
  },
];

4. 启动

yarn start

实际效果

二：不同应用

待定……