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 - 掘金