使用umi4+qiankun 搭建微前端项目

1、初始化项目：

首先新建空文件夹在里面新建master 文件， 使用一下命令创建主应用;

$ yarn create umi
...
✔ Pick Umi App Template › Simple App
✔ Pick Npm Client › yarn
✔ Pick Npm Registry › npm

当项目初始化完成后使用

$ yarn start
info  - [MFSU] buildDeps since cacheDependency has changed
        ╔════════════════════════════════════════════════════╗
        ║ App listening at:                                  ║
        ║  >   Local: http://localhost:8000                  ║
ready - ║  > Network: http://172.16.10.209:8000              ║
        ║                                                    ║
        ║ Now you can open browser with the above addresses↑ ║
        ╚════════════════════════════════════════════════════╝

打开页面 项目创建成功

重复以上步骤 创建子应用appA， appB；

2、编辑主应用

2.1编辑layouts

import { Link, Outlet } from 'umi';
import styles from './index.less';

export default function Layout() {
  return (
    <div className={styles.navs}>
      <ul>
        <li>
          <Link to="/appA">appA</Link>
        </li>
        <li>
          <Link to="/appB">appB</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  );
}

2.2 安装qiankun

$ yarn add qiankun

2.3 配置主应用

在.umiirc.ts增加如下配置：

export default defineConfig({
...
 qiankun:{
    master:{
      // 注册子应用信息
      apps:[
        {name:'appA',
        entry:'http://localhost:8001'
      },
      {name:'appB',
      entry:'http://localhost:8002'
    }
      ],
      // 配置微应用关联路由
      router:[{
        path:'/appA',
        microApp: 'appA',
      },{
        path:'/appB',
        microApp: 'appB',
      }
    ]
    }
  },
  ...
  });

3 、编辑子应用

3.1修改页面样式

修改appA下 src/pages/index.tsx

export default function HomePage() {
  return (
    <div>
     APP A
    </div>
  );
}

修改appB下 src/pages/index.tsx

export default function HomePage() {
  return (
    <div>
     APP B
    </div>
  );
}

3.2 安装qiankun

$ yarn add qiankun

3.3 配置子应用

在.umiirc.ts增加如下配置：

export default defineConfig({
...
 qiankun:{
    slave:{},
  },
  ...
  });