初始化项目
- 创建子应用
yarn create react-app qiankun-micro-app1 --template typescript
yarn create react-app qiankun-micro-app1 --template typescript
- 创建基座
yarn create react-app qiankun-base --template typescript
- 在三个项目中安装上乾坤依赖
yarn add qiankun
- 使用env文件设置应用不同端口
- 在主应用中注册微应用
import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'react app', // app name registered entry: '//localhost:7100', container: '#yourContainer', activeRule: '/yourActiveRule', }, { name: 'vue app', entry: { scripts: ['//localhost:7100/main.js'] }, container: '#yourContainer2', activeRule: '/yourActiveRule2', }, ]); start();
我的代码
import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'react app', // app name registered entry: '//localhost:3011', container: '#container', activeRule: '/micro-app', }, { name: 'vue app', entry: '//localhost:3012', container: '#container2', activeRule: '/micro-app2', }, ]); start();
- 在父应用添加挂载点
挂在子应用
为了不暴露webpack内置的配置，使用react-app-rewired解决
yarn add react-app-rewired
- 修改
package.json命令
