umi3 + qiankun 搭建微前端

本文介绍 qiankun 的主应用和微应用都使用 umi3 搭建。

1. 主应用

创建主应用,安装依赖包

$ mkdir umi-main
$ cd umi-main
$ yarn create @umijs/umi-app
$ yarn
$ yarn add @umijs/plugin-qiankun -D

修改启动端口号:根目录下创建 .env 文件,内容如下:

PORT=8300

修改 .umirc 配置文件

import { defineConfig } from 'umi';

export default defineConfig({
  qiankun: {
    master: {
      apps: [
        {
          name: 'micro',                                // 微应用名称
          entry: '//localhost:8301',        // 微应用入口文件
        }
      ]
    }
  },
  routes: [
    { exact: true, path: '/', component: '@/pages/index' },
    { 
      path: '/micro', 
      microApp: 'micro',        // 当访问路由为 /micro,主应用实际访问名称为 micro 的微应用
    },
  ],
});

2. 微应用

创建微应用

$ mkdir umi-micro
$ cd umi-micro
$ yarn create @umijs/umi-app
$ yarn
$ yarn add @umijs/plugin-qiankun -D

修改微应用启动端口,创建 .env 文件,内容如下:

PORT=8301

修改 .umirc 配置文件

import { defineConfig } from 'umi';

export default defineConfig({
  // 加这个属性,就不用在入口文件 src/app.ts 中写 qiankun 生命周期函数了
  qiankun: {
    slave: {},
  },
  // 加这个属性,静态资源访问前缀
  publicPath: '/micro/',
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
});

修改 package.json 文件,去除 private 属性,添加 name 属性,否则启动会报错 You should have name in package.json

-- "private": true,
++ "name": "umi-micro",

修改页面内容,以区别于主应用 src/pages/index.tsx

import styles from './index.less';

export default function IndexPage() {
  return (
    <div>
      <h1 className={styles.title}>Umi-Micro Page</h1>
    </div>
  );
}

3. 测试

先启动微应用,访问 http://localhost:8301/

image.png

启动主应用,访问 http://localhost:8300/

image.png

还是主应用的端口,访问 /micro 路由,可以看到页面中显示的是微应用的页面,环境搭建成功

image.png

至此,开发已经没问题了,但是后面部署还会遇到问题,这个下篇文章再介绍。

推荐阅读更多精彩内容