微前端框架：qiankun。
主應用：react19+vite7，子應用1：react19+vite7，子應用2 ：react19+vite7
一、主應用
? ? ? ? 1. 安裝依賴
pnpm i qiankun? ? ? ? 2. 注冊子應用
? ? ? ? ? ? ? ? (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 -D? ? ? ? 2. 配置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博客
