乾坤qiankun的使用

vue2 为主应用 react 为子应用

在项目中安装乾坤

yarn add qiankun # 或者 npm i qiankun -S

vue主应用

在main.js中新增 （需要注意的是路由模型为history模式）

registerMicroApps([{name: 'reactApp',entry: '//localhost:3011',container: '#container',//主应用挂在子应用的容器id名称activeRule: '/app-react'，//主应用挂在子应用的路由名称},{name: 'vueApp',entry: '//localhost:8080',container: '#container',activeRule: '/app-vue',},
]);

react 子应用：

修改 index.js文件

	import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter  } from 'react-router-dom';
function render(props) {const { container } = props;// console.log('====================================');console.log(container);console.log('====================================');// container 存在 说明是作为子应用运行 不存在则是独立运行const root = ReactDOM.createRoot(container ? container.querySelector('#appRoot') : document.getElementById('appRoot'));//需要注意的是 appRoot 和 public目录下index.html 中div的id名称保持一致root.render(<HashRouter ><App /></HashRouter>
);
}// 如果是独立运行
if (!window.__POWERED_BY_QIANKUN__) {render({});
}export async function bootstrap() {console.log('react app bootstraped');
}export async function mount(props) {console.log('react app mounted', props);render(props);
}export async function unmount(props) {const { container } = props;const root = ReactDOM.createRoot(container ? container.querySelector('#root') : document.getElementById('root'));root.unmount();
}

修改webpack配置，安装craco

yarn add react-app-rewired 或 npm i -D react-app-rewired

根目录下新增 config-overrides.js文件

const { name } = require('./package');module.exports = {webpack: (config) => {config.output.library = `${name}-[name]`;config.output.libraryTarget = 'umd';// config.output.jsonpFunction = `webpackJsonp_${name}`;config.output.globalObject = 'window';return config;},devServer: (_) => {const config = _;config.headers = {'Access-Control-Allow-Origin': '*',};config.historyApiFallback = true;config.hot = false;config.watchContentBase = false;config.liveReload = false;return config;},
};

修改package.json文件

这里端口号需要和子应用挂在的端口号保持一致

如在主应用在挂在子应用时遇到

需要再子应用 package.json 中 eslintConfig 中新增

[外链图片转存中…(img-5Wnjp92F-1748775941845)]

需要再子应用 package.json 中 eslintConfig 中新增

[外链图片转存中…(img-YZw30X77-1748775941845)]

参考链接 React 18 配置 QianKun：主应用【React 18】+ 微应用【React 18】前端技能提升 react - 掘金