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