import { registerMicroApps, start } from 'qiankun';
const mountedApps = []//记录已经加载过的子应用
// 第一次匹配到子应用时加载，加载过的不处理
function genActiveRule(routerPrefix){
  return (location)=>{
    if(location.hash.startsWith(`#/${routerPrefix}`)){
      if(!mountedApps.includes(routerPrefix)){
        mountedApps.push(routerPrefix)
      }
      return true
    }
    return mountedApps.includes(routerPrefix)
  }

}
registerMicroApps([
  {
    name: 'uecenter', // 子应用名称
    entry: '//dev-uecenter.szlcsc.com:3001', // 子应用入口（开发环境用本地服务）
    container: '#subapp-container', // 挂载容器
    activeRule: genActiveRule('uecenter'), // 激活路径
    props: { /* 可传递全局数据 */ }
  }
]);

// 启动 Qiankun
start({
  prefetch:false,
  sandbox:false,
  singular:false
});

<template>
  <div id="subapp-container"></div>
</template>

{
  path: '*',
  name:'root',
  meta:{
    isSubApp:true
  },
  component: () => import('@/views/layout.vue') // 包含容器的组件
}

npm install vite-plugin-qiankun -S

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import qiankun from 'vite-plugin-qiankun';
// 开发者模式无法引入react插件，需要手动每个页面引入，详见：https://github.com/umijs/qiankun/issues/1257
const useDevMode = true
export default defineConfig({
  plugins: [
    !useDevMode&&react(), // 开发者模式
    qiankun('uecenter', { // 子应用名称（需与主应用注册的 name 一致）
      useDevMode: true, // 开发模式下启用
    }),
  ],
  server: {
    port: 3001, // 指定端口（需与主应用 entry 配置一致）
    host:'0.0.0.0',
    cors:true // 允许跨域访问
  },
  base: '/', // 开发环境用/，生产环境用域名+端口
  build: {
    outDir: 'dist',
    rollupOptions: {
      output: {
        format: 'umd', // 必须为 umd 格式
        entryFileNames: 'assets/[name].[hash].js',
      },
    }
  },
});

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

function render(props){
  const container = props.container?props.container.querySelector('#root'):document.getElementById('root')
  ReactDOM.render(
    <App />,
    container
  )
}

// 独立运行
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({});
} else {
  // qiankun环境运行
  renderWithQiankun({
    mount(props) {
      console.log('mount');
      render(props);
    },
    bootstrap() {
      console.log('bootstrap');
    },
    unmount(props) {
      console.log('unmount');
      const container = props.container?props.container.querySelector('#root'):document.getElementById('root')
      ReactDOM.unmountComponentAtNode(
        container
      );
    },
  });
}

// src/App.jsx
import { BrowserRouter,HashRouter } from 'react-router-dom'; //这里使用的路由模式要与主项目一致
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import RenderRouter from './routers'

function App() {
  return (
    <HashRouter basename={window.__POWERED_BY_QIANKUN__ ? '/uecenter' : '/'}>
      <RenderRouter />
    </HashRouter>
  );
}