qiankun 集成 react18+vite

使用 qiankun 集成 react18+vite 项目

基座项目

基座项目可见qiankun 示例

子应用改造

vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun

pnpm install vite-plugin-qiankun

配置环境变量

配置环境变量，是子应用既可以单独运行又可以接入主应用

.env

NODE_ENV=development
VITE_APP_BASE_URL=/

.env.micro

NODE_ENV=development
VITE_APP_BASE_URL=/app4

.env.buildMicro

NODE_ENV=development
VITE_APP_BASE_URL=/app4

然后在 package.json 中配置启动脚本

{
  "scripts": {
    "dev": "vite",
    "dev:micro": "vite --mode micro",
    "build": "tsc -b && vite build --mode micro",
    "preview": "vite preview"
  },
}

入口文件改造

使用插件中的 renderWithQiankun 配置生命周期

import React from 'react';
import ReactDOM from 'react-dom/client';

import {
  renderWithQiankun,
  qiankunWindow,
} from 'vite-plugin-qiankun/dist/helper';
import type { QiankunProps } from 'vite-plugin-qiankun/dist/helper';

import App from './App.tsx';
import './index.css';

let root: any = null;

const render = (props: QiankunProps) => {
  const { container } = props;
  root = ReactDOM.createRoot(
    container
      ? container.querySelector('#root')!
      : document.getElementById('root')!
  ).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
};

renderWithQiankun({
  mount(props: QiankunProps) {
    render(props);
  },
  bootstrap() {},
  unmount() {},
  update() {},
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({});
}

路由改造

修改路由的 basename 为之前配置的环境变量

import React from 'react';
import { createBrowserRouter } from 'react-router-dom';
import Root from '../views/root';
import NextPage from '../views/next';

const router = createBrowserRouter(
  [
    // ...
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_URL,
  }
);

export default router;

修改打包配置

除了导出的生命周期，还要在打包配置中修改

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import qiankun from 'vite-plugin-qiankun';

const { name } = require('./package');

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    base: mode === 'development' ? './' : '/app4',
    plugins: [react(), qiankun(name, { useDevMode: true })],
    server: {
      port: 8084,
    },
  };
});

注册子应用

子应用配置完成后，到基座应用中去注册

const apps: RegistrableApp<any>[] = [
  // ...
  {
    name: 'app4',
    entry: 'http://localhost:8084/app4',
    container: '#microApp',
    activeRule: '/app4',
  },
];

registerMicroApps(apps);
start();

出现报错

此时会出现报错，详见qiankun 嵌入 react 项目报错

react项目嵌入报错

子应用增加功能

在子应用中添加随意内容，并测试嵌入后是否正常显示

正常加载