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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值