专业做化妆品外包材的招聘网站,沧州网站建设的集成商,书店网站开发目的和意义,甘肃省建设厅建筑业信息网零#xff1a; 前言
微前端可以将大应用拆分功能独立的微应用#xff0c;可独立开发部署#xff0c;
每个微应用可以采用自己的技术栈#xff0c;这样更好维护和拓展。微前端也会存在跨域 权限控制 数据共享 性能(页面加载时间) 安全
多团队协作(一个团队负责一个页面或模…零 前言
微前端可以将大应用拆分功能独立的微应用可独立开发部署
每个微应用可以采用自己的技术栈这样更好维护和拓展。微前端也会存在跨域 权限控制 数据共享 性能(页面加载时间) 安全
多团队协作(一个团队负责一个页面或模块) 组件重用。要采用适合的方案一 创建项目
主项目
yarn create vite main-app --template react-tsmicro-react01项目
npx create-react-app micro-react01 --template typescriptmicro-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 idyourContainer1/divdiv idyourContainer2/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 (divmainappdiv idyourContainer1/divdiv idyourContainer2/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打包然后启动服务
npm i serve -g
serve得到服务地址localhost:3001
四 访问微应用
访问 主项目地址/app1, 此时发现micro-react01应用已经加载出来了
