微前端框架：qiankun。
主应用：react19+vite7，子应用1：react19+vite7，子应用2 ：react19+vite7
一、主应用
1. 安装依赖
pnpm i qiankun2. 注册子应用
(1) 在src目录下创建个文件夹，用来存储关于微前端的文件。文件夹名：qiankun
(2) 创建两个文件：config.ts 和 register.ts。
// config.ts export default {// 存储需要注册的微前端microApps: [{name: 'app1', // 微应用的名称,微应用之间必须确保唯一。entry: '//localhost:9001', // 微应用的入口,微应用的访问地址container: '#qiankun-container', // 微应用的容器节点的选择器或者 Element 实例activeRule: '/app1' // 微应用的激活规则，这个值会与url的前缀匹配。},{name: 'app2',entry: '//localhost:9002',container: '#qiankun-container',activeRule: '/app2'},]
}// register.ts
// 注册微应用import qiankunConfig from "./config"
import { addGlobalUncaughtErrorHandler, registerMicroApps, start } from 'qiankun'export const startQiankun = () => {if (qiankunConfig.microApps.length > 0) {// 注册微应用registerMicroApps(// 微应用列表qiankunConfig.microApps,// 生命周期{beforeLoad: (app) => {return new Promise((resolve) => {console.log('beforeLoad', app.name)resolve(true)})},beforeMount: (app) => {return new Promise((resolve) => {console.log('beforeMount ', app.name)resolve(true)})},beforeUnmount: (app) => {return new Promise((resolve) => {console.log('beforeUnmount ', app.name)resolve(true)})},})}// 启动微应用start()// 全局的未捕获异常处理器addGlobalUncaughtErrorHandler(event => {console.log('异常=>', event)})
}
3. 设置路由
（1）创建一个容器组件 @/src/pages/qiankun/Qiankun.tsx，用于生成容器节点
// Qiankun.tsxconst Qiankun = () => {return <div id="qiankun-container"></div>
}export default Qiankun
（2）在路由中配置与微应用对应的路由 @/src/router/Route.tsx
import { useRoutes } from 'react-router-dom'import { type FC } from 'react'// 引入组件
import Qiankun from '@/pages/qiankun/Qiankun'const Route: FC = () => {// 基础路由const routes = [{path: '/index',element: null}, // 微应用1{path: '/app1',element: <Qiankun/>},// 微应用2{path: '/app2',element: <Qiankun/>},{path: '*',element: <LazyLoad path="pages/error/404" />}]return <>{useRoutes(routes)}</>
}export default Route
4. 启动
修改main.tsx，在文件中调用startQiankun()
// main.tsximport { StrictMode, Suspense } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import { ConfigProvider } from 'antd'
import { store, persistor } from '@/store/index.ts'
import { PersistGate } from 'redux-persist/integration/react'
import '@/assets/css/var.css'
import './index.css'import { BrowserRouter } from 'react-router-dom'
import RouterList from '@/router/Route'// 引入乾坤注册器
import { startQiankun } from '@/qiankun/register'// 启动乾坤
startQiankun()createRoot(document.getElementById('root')!).render(<StrictMode><Provider store={store}><PersistGate loading={null} persistor={persistor}><ConfigProvider theme={{ cssVar: true }}><Suspense fallback={null}><BrowserRouter><RouterList /></BrowserRouter></Suspense></ConfigProvider></PersistGate></Provider></StrictMode>
)
二、子应用
1. 安装插件
由于应用使用vite构建 ，所以子应用接入微前端需要安装vite-plugin-qiankun，以便vite支持乾坤微前端。
pnpm i vite-plugin-qiankun -D2. 配置vite
// vite.config.tsimport path from 'path'import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// 引入适配器
import qiankun from "vite-plugin-qiankun"// https://vite.dev/config/
export default defineConfig({plugins: [react(),// 添加子应用，名称需要和主应用注册的名称一样qiankun('app1', {useDevMode: true // 启用开发模式})],server: {open: true,port: 9001, // 应用1的端口为9001cors: true, // 启用 CORS},// 支持@导入resolve: {alias: {'@': path.resolve(__dirname, 'src')}},})3. 设置Router的basename
修改@/main.tsx的Router,增加basename
// main.tsx import { StrictMode, Suspense } from 'react'
import { createRoot, type Root } from 'react-dom/client'
import { Provider } from 'react-redux'
import { ConfigProvider } from 'antd'
import { store, persistor } from '@/store/index.ts'
import { PersistGate } from 'redux-persist/integration/react'
import '@/assets/css/var.css'
import './index.css'import { BrowserRouter } from 'react-router-dom'
import RouterList from '@/router/Route'
import { qiankunWindow, renderWithQiankun } from 'vite-plugin-qiankun/dist/helper'let reactDomIns = null
const render = () => {reactDomIns = createRoot(document.getElementById('root')!).render(<StrictMode><Provider store={store}><PersistGate loading={null} persistor={persistor}><ConfigProvider theme={{ cssVar: true }}><Suspense fallback={null}>{/* 增加basename配置 */}<BrowserRouter basename={qiankunWindow.__POWERED_BY_QIANKUN__ ? '/app1' : '/'}><RouterList /></BrowserRouter></Suspense></ConfigProvider></PersistGate></Provider></StrictMode>)
}// 注册子应用的生命周期
renderWithQiankun({mount(props) {console.log('props,', props)},bootstrap() {},unmount() {},update() {}
})render()
以上是自己在学习中记录，仅供参考，有任务问题欢迎指正。
附大佬博客：极简实战：React + Vue 微前端（Qiankun + Vite）_react vue-CSDN博客
