本文介紹 qiankun 的主應(yīng)用和微應(yīng)用都使用 umi3 搭建危号。
1. 主應(yīng)用
創(chuàng)建主應(yīng)用栖袋，安裝依賴(lài)包
$ mkdir umi-main
$ cd umi-main
$ yarn create @umijs/umi-app
$ yarn
$ yarn add @umijs/plugin-qiankun -D
修改啟動(dòng)端口號(hào)：根目錄下創(chuàng)建 .env 文件，內(nèi)容如下：
PORT=8300
修改 .umirc 配置文件
import { defineConfig } from 'umi';
export default defineConfig({
qiankun: {
master: {
apps: [
{
name: 'micro', // 微應(yīng)用名稱(chēng)
entry: '//localhost:8301', // 微應(yīng)用入口文件
}
]
}
},
routes: [
{ exact: true, path: '/', component: '@/pages/index' },
{
path: '/micro',
microApp: 'micro', // 當(dāng)訪問(wèn)路由為 /micro，主應(yīng)用實(shí)際訪問(wèn)名稱(chēng)為 micro 的微應(yīng)用
},
],
});
2. 微應(yīng)用
創(chuàng)建微應(yīng)用
$ mkdir umi-micro
$ cd umi-micro
$ yarn create @umijs/umi-app
$ yarn
$ yarn add @umijs/plugin-qiankun -D
修改微應(yīng)用啟動(dòng)端口匿垄，創(chuàng)建 .env 文件，內(nèi)容如下：
PORT=8301
修改 .umirc 配置文件
import { defineConfig } from 'umi';
export default defineConfig({
// 加這個(gè)屬性，就不用在入口文件 src/app.ts 中寫(xiě) qiankun 生命周期函數(shù)了
qiankun: {
slave: {},
},
// 加這個(gè)屬性访惜，靜態(tài)資源訪問(wèn)前綴
publicPath: '/micro/',
routes: [
{ path: '/', component: '@/pages/index' },
],
});
修改 package.json 文件，去除 private 屬性腻扇，添加 name 屬性债热，否則啟動(dòng)會(huì)報(bào)錯(cuò) You should have name in package.json
-- "private": true,
++ "name": "umi-micro",
修改頁(yè)面內(nèi)容，以區(qū)別于主應(yīng)用 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. 測(cè)試
先啟動(dòng)微應(yīng)用幼苛，訪問(wèn) http://localhost:8301/
image.png
啟動(dòng)主應(yīng)用窒篱，訪問(wèn) http://localhost:8300/
image.png
還是主應(yīng)用的端口，訪問(wèn) /micro 路由，可以看到頁(yè)面中顯示的是微應(yīng)用的頁(yè)面墙杯，環(huán)境搭建成功
image.png
至此配并，開(kāi)發(fā)已經(jīng)沒(méi)問(wèn)題了，但是后面部署還會(huì)遇到問(wèn)題高镐，這個(gè)下篇文章再介紹溉旋。
