本文介绍 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
至此，开发已经没问题了，但是后面部署还会遇到问题，这个下篇文章再介绍。
