当前位置：首页 > news >正文

微前端：quankun

news 2025/8/25 9:40:49

零：前言

微前端可以将大应用拆分功能独立的微应用，可独立开发部署，
每个微应用可以采用自己的技术栈，这样更好维护和拓展。微前端也会存在跨域 权限控制 数据共享 性能(页面加载时间) 安全 
多团队协作(一个团队负责一个页面或模块) 组件重用。要采用适合的方案

一：创建项目

主项目

yarn create vite main-app --template react-ts

micro-react01项目

npx create-react-app micro-react01 --template typescript

micro-vue01项目

yarn create vite micro-vue01 --template vue-ts

二：主项目操作

npm i quankun -S

在主项目app.tsx加入下面的代码

import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'reactapp', // app name registeredentry: '//localhost:3001',container: '#yourContainer1',activeRule: '/app1',},{name: 'vueapp',entry: '//localhost:5175',container: '#yourContainer2',activeRule: '/app2',},
]);start();import { loadMicroApp } from 'qiankun';// loadMicroApp({
//   name: 'reactapp',
//   entry: '//localhost:3001',
//   container: '#yourContainer1',
// });

帮加上插槽地址

<div id='yourContainer1'></div><div id='yourContainer2'></div>

最终如下
app.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'reactapp', // app name registeredentry: '//localhost:3001',container: '#yourContainer1',activeRule: '/app1',},{name: 'vueapp',entry: '//localhost:5175',container: '#yourContainer2',activeRule: '/app2',},
]);start();import { loadMicroApp } from 'qiankun';// loadMicroApp({
//   name: 'reactapp',
//   entry: '//localhost:3001',
//   container: '#yourContainer1',
// });function App() {const [count, setCount] = useState(0)return (<><div>mainapp<div id='yourContainer1'></div><div id='yourContainer2'></div></div></>)
}export default App

三：微项目操作

micro-react01项目

在package.json中加入"devServer": {"headers": {"Access-Control-Allow-Origin": "*","Access-Control-Allow-Methods": "GET, POST, PUT, DELETE","Access-Control-Allow-Headers": "*"}}执行npm run build打包