基于乾坤微前端技术Demo
本项目是基于qiankun+React+Vite的现代化微前端解决方案，专为大型企业级应用设计。核心特性包括微前端架构、独立开发部署、动态加载、统一UI设计、高性能和响应式布局。提供一键式启动脚本，支持主应用和多个微应用同时运行（主应用8080端口，微应用8081-8083端口）。技术栈采用qiankun微前端框架、React18、Vite5构建工具和Tailwind CSS样式系统。架构分为主应
·
项目概述
本项目是一个基于 qiankun + React + Vite 技术栈的现代化微前端解决方案，专门用于构建大型企业级应用的前端架构。该方案能够将单体应用拆分为多个独立的微应用，实现团队独立开发、独立部署，同时保持统一的用户体验和代码复用。
核心特性
- 🏗️ 微前端架构：基于qiankun框架的微前端解决方案
- ⚡ 独立开发：每个微应用可独立开发、测试、部署
- 🔄 动态加载：运行时动态加载微应用，按需加载资源
- 🎨 统一设计：共享UI组件库和设计系统
- 🚀 高性能：基于Vite的快速构建和热更新
- 📱 响应式设计：基于Tailwind CSS的现代化界面
- 🔧 开发友好：完整的开发工具链和调试支持
快速开始
环境准备：
- 安装 Node.js 16+ 和 npm/yarn
- 克隆项目代码
- 运行安装脚本
安装依赖：
# 使用批处理脚本一键安装所有依赖（推荐）
install-all.bat
# 或使用PowerShell脚本
.\install-all.ps1
# 或手动安装
npm run install:all
启动开发：
# 使用批处理脚本一键启动所有服务（推荐）
start-all.bat
# 或使用PowerShell脚本
.\start-all.ps1
# 或使用npm脚本
npm run dev
访问应用：
- 主应用：http://localhost:8080
- 内容管理：http://localhost:8081
- 用户管理：http://localhost:8082
- 系统设置：http://localhost:8083
启动程序演示
启动流程说明：
- 双击运行：双击
start-all.bat文件启动所有服务 - 服务启动：自动启动4个服务（主应用8080，微应用8081-8083）
- 窗口管理：每个服务在独立命令窗口中运行
- 启动完成：所有服务启动后显示访问地址
技术架构
整体架构图
┌─────────────────────────────────────────────────────────────┐
│ 主应用层 (Main App) │
├─────────────────────────────────────────────────────────────┤
│ qiankun 框架 │ React Router │ Layout 组件 │
│ - 微应用注册 │ - 路由管理 │ - 导航菜单 │
│ - 生命周期管理 │ - 状态同步 │ - 容器管理 │
│ - 通信机制 │ - 历史记录 │ - 样式隔离 │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 微应用层 (Micro Apps) │
├─────────────────────────────────────────────────────────────┤
│ 内容管理应用 │ 用户管理应用 │ 系统设置应用 │
│ - 文章管理 │ - 用户列表 │ - 基础设置 │
│ - 内容编辑 │ - 权限管理 │ - 安全配置 │
│ - 发布流程 │ - 角色分配 │ - 系统监控 │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 构建层 (Build Layer) │
├─────────────────────────────────────────────────────────────┤
│ Vite 构建工具 │ Tailwind CSS │ 开发服务器 │
│ - 快速构建 │ - 样式系统 │ - 热更新 │
│ - 代码分割 │ - 响应式设计 │ - 代理配置 │
│ - 资源优化 │ - 主题定制 │ - 跨域处理 │
└─────────────────────────────────────────────────────────────┘
技术栈详解
主应用技术栈
- qiankun 2.10.16：微前端框架
- React 18.2.0：用户界面库
- React Router 6.8.1：路由管理
- Vite 5.0.8：构建工具
- Tailwind CSS 3.3.6：样式框架
微应用技术栈
- React 18.2.0：用户界面库
- Vite 5.0.8：构建工具
- vite-plugin-qiankun：qiankun集成插件
- Tailwind CSS 3.3.6：样式框架
- PostCSS 8.4.32：CSS处理器
核心模块分析
1. 主应用模块
1.1 应用配置 (micro-apps-config.js)
const isDev = import.meta.env.DEV
const devConfig = [
{
name: 'content-management',
entry: 'http://localhost:8081',
container: '#subapp-container',
activeRule: '/content'
},
{
name: 'user-management',
entry: 'http://localhost:8082',
container: '#subapp-container',
activeRule: '/users'
},
{
name: 'settings',
entry: 'http://localhost:8083',
container: '#subapp-container',
activeRule: '/settings'
}
]
const prodConfig = [
{
name: 'content-management',
entry: '/content/',
container: '#subapp-container',
activeRule: '/content'
},
{
name: 'user-management',
entry: '/users/',
container: '#subapp-container',
activeRule: '/users'
},
{
name: 'settings',
entry: '/settings/',
container: '#subapp-container',
activeRule: '/settings'
}
]
export const microApps = isDev ? devConfig : prodConfig
功能特点：
- 支持开发和生产环境配置
- 动态路由规则配置
- 容器挂载点管理
- 微应用入口地址配置
1.2 布局组件 (Layout.jsx)
import React, { useEffect, useState } from 'react'
const Layout = () => {
const [currentPath, setCurrentPath] = useState(window.location.pathname)
useEffect(() => {
const handlePopState = () => {
setCurrentPath(window.location.pathname)
}
window.addEventListener('popstate', handlePopState)
return () => {
window.removeEventListener('popstate', handlePopState)
}
}, [])
const menuItems = [
{ key: 'home', label: 'Home', path: '/' },
{ key: 'content', label: 'Content Management', path: '/content' },
{ key: 'users', label: 'User Management', path: '/users' },
{ key: 'settings', label: 'Settings', path: '/settings' }
]
const handleNavigation = (path) => {
window.history.pushState(null, '', path)
setCurrentPath(path)
}
const isActive = (itemPath) => {
if (itemPath === '/') {
return currentPath === '/'
}
return currentPath.startsWith(itemPath)
}
return (
<div className="min-h-screen bg-gray-100">
<nav className="bg-white shadow-lg">
<div className="max-w-7xl mx-auto px-4">
<div className="flex justify-between h-16">
<div className="flex space-x-8">
<div className="flex items-center">
<span className="text-2xl font-bold text-blue-600">Qiankun App</span>
</div>
<div className="flex space-x-4">
{menuItems.map((item) => (
<button
key={item.key}
onClick={() => handleNavigation(item.path)}
className={`inline-flex items-center px-4 py-2 text-sm font-medium ${
isActive(item.path)
? 'text-blue-600 border-b-2 border-blue-600'
: 'text-gray-600 hover:text-blue-600'
}`}
>
{item.label}
</button>
))}
</div>
</div>
</div>
</div>
</nav>
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
{currentPath === '/' && (
<div className="px-4 py-6 sm:px-0">
<div className="border-4 border-dashed border-gray-200 rounded-lg p-8 text-center">
<h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Qiankun Micro-Frontend</h1>
<p className="text-xl text-gray-600">Select a menu item to load micro applications</p>
</div>
</div>
)}
<div id="subapp-container"></div>
</main>
</div>
)
}
export default Layout
核心功能：
- 导航菜单管理
- 路由状态同步
- 微应用容器管理
- 响应式布局设计
2. 微应用模块
2.1 内容管理应用 (Content Management)
import React from 'react'
const App = () => {
return (
<div className="space-y-6">
<div className="bg-white shadow rounded-lg">
<div className="px-4 py-5 sm:p-6">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold text-gray-900">Content Management</h1>
<button className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200">
New Article
</button>
</div>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Title
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Author
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Created Date
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
How to Build Modern Web Applications
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Published
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Admin
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2024-01-15
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button className="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
<button className="text-red-600 hover:text-red-900">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
)
}
export default App
功能特点：
- 文章列表管理
- 状态标签显示
- 操作按钮交互
- 响应式表格设计
2.2 用户管理应用 (User Management)
import React from 'react'
const App = () => {
return (
<div className="space-y-6">
<div className="bg-white shadow rounded-lg">
<div className="px-4 py-5 sm:p-6">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold text-gray-900">User Management</h1>
<button className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200">
Add User
</button>
</div>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
User
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Role
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Last Login
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tr>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10">
<img className="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">Zhang San</div>
<div className="text-sm text-gray-500">zhangsan@example.com</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
Admin
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Active
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button className="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
<button className="text-red-600 hover:text-red-900">Disable</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
)
}
export default App
功能特点：
- 用户信息展示
- 角色权限管理
- 状态监控
- 头像显示
2.3 系统设置应用 (Settings)
import React from 'react'
const App = () => {
return (
<div className="space-y-6">
<div className="bg-white shadow rounded-lg">
<div className="px-4 py-5 sm:p-6">
<h1 className="text-2xl font-bold text-gray-900 mb-6">System Settings</h1>
<div className="space-y-8">
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">Basic Settings</h3>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Site Name
</label>
<input
type="text"
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
defaultValue="AppCMS"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Site Description
</label>
<textarea
rows={3}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
defaultValue="Modern content management system built with React + Vite + Tailwind CSS"
/>
</div>
</div>
</div>
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">User Settings</h3>
<div className="space-y-4">
<div className="flex items-center">
<input
type="checkbox"
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
defaultChecked
/>
<label className="ml-2 block text-sm text-gray-900">
Allow user registration
</label>
</div>
<div className="flex items-center">
<input
type="checkbox"
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
defaultChecked
/>
<label className="ml-2 block text-sm text-gray-900">
Require email verification
</label>
</div>
</div>
</div>
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">Security Settings</h3>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Session Timeout (minutes)
</label>
<input
type="number"
className="w-32 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
defaultValue="30"
/>
</div>
<div className="flex items-center">
<input
type="checkbox"
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
defaultChecked
/>
<label className="ml-2 block text-sm text-gray-900">
Enable two-factor authentication
</label>
</div>
</div>
</div>
<div className="pt-6 border-t border-gray-200">
<div className="flex justify-end">
<button className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200">
Save Settings
</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default App
功能特点：
- 基础设置管理
- 用户权限配置
- 安全设置选项
- 表单验证
3. 构建配置
3.1 主应用构建配置 (vite.config.js)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 8080,
open: true,
cors: true
},
base: '/'
})
3.2 微应用构建配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import qiankun from 'vite-plugin-qiankun'
const isDev = process.env.NODE_ENV === 'development'
export default defineConfig({
plugins: [
react({
include: '**/*.{jsx,tsx}',
babel: {
plugins: []
}
}),
qiankun('content-management', {
useDevMode: true
})
],
server: {
port: 8081,
cors: true,
origin: 'http://localhost:8081',
headers: {
'Access-Control-Allow-Origin': '*'
},
hmr: false
},
base: isDev ? '/' : '/content',
build: {
target: 'esnext',
minify: false
}
})
数据流程
1. 微应用加载流程
2. 开发环境启动流程
- 依赖安装：使用PowerShell脚本安装所有依赖
- 服务启动：并行启动所有微应用服务
- 端口分配：主应用8080，微应用8081-8083
- 代理配置：配置CORS和跨域访问
- 热更新：支持代码变更实时更新
核心算法
1. 微应用注册算法
// qiankun微应用注册逻辑
const registerMicroApps = (apps) => {
apps.forEach(app => {
registerMicroApp({
name: app.name,
entry: app.entry,
container: app.container,
activeRule: app.activeRule,
props: {
data: getGlobalData()
}
})
})
}
// 路由匹配算法
const matchRoute = (pathname, activeRule) => {
if (typeof activeRule === 'string') {
return pathname.startsWith(activeRule)
}
if (typeof activeRule === 'function') {
return activeRule(pathname)
}
if (activeRule instanceof RegExp) {
return activeRule.test(pathname)
}
return false
}
2. 样式隔离算法
// CSS样式隔离实现
const createScopedCSS = (css, scope) => {
const scopedCSS = css.replace(/([^{}]+){/g, (match, selector) => {
const scopedSelector = selector
.split(',')
.map(s => `${scope} ${s.trim()}`)
.join(', ')
return `${scopedSelector} {`
})
return scopedCSS
}
// 动态样式注入
const injectStyles = (styles, container) => {
const styleElement = document.createElement('style')
styleElement.textContent = styles
container.appendChild(styleElement)
return styleElement
}
3. 生命周期管理算法
// 微应用生命周期管理
const lifecycleManager = {
bootstrap: async (app) => {
console.log(`${app.name} bootstrap`)
return Promise.resolve()
},
mount: async (app) => {
console.log(`${app.name} mount`)
const container = document.querySelector(app.container)
if (container) {
container.innerHTML = app.content
}
return Promise.resolve()
},
unmount: async (app) => {
console.log(`${app.name} unmount`)
const container = document.querySelector(app.container)
if (container) {
container.innerHTML = ''
}
return Promise.resolve()
}
}
用户界面设计
1. 设计理念
- 模块化：每个微应用独立设计，保持一致性
- 响应式：支持不同屏幕尺寸的自适应布局
- 现代化：采用Tailwind CSS的现代设计风格
- 一致性：统一的颜色、字体和间距规范
- 可访问性：符合Web可访问性标准
2. 界面组件
2.1 主应用导航
- 顶部导航栏设计
- 品牌标识展示
- 菜单项状态管理
- 响应式布局适配
2.2 微应用容器
- 动态内容加载区域
- 加载状态指示
- 错误状态处理
- 过渡动画效果
2.3 程序页面切换演示
页面切换流程：
- 首页展示：显示欢迎页面和导航菜单
- 内容管理：切换到内容管理微应用，展示文章列表
- 用户管理：切换到用户管理微应用，展示用户列表
- 系统设置：切换到系统设置微应用，展示配置选项
- 无缝切换：微应用之间实现无缝切换，保持用户体验一致
2.4 数据表格
- 响应式表格设计
- 状态标签显示
- 操作按钮交互
- 分页和排序功能
开发工具脚本详解
1. 依赖安装脚本 (install-all.bat)
脚本功能：
该批处理脚本用于一键安装所有微前端应用的依赖包，包括主应用和所有微应用的依赖。
脚本源码分析：
@echo off
echo Installing dependencies for all applications...
echo.
echo [1/5] Installing root dependencies...
cd /d %~dp0
call npm install
echo.
echo [2/5] Installing main-app dependencies...
cd /d %~dp0main-app
call npm install
echo.
echo [3/5] Installing content-management dependencies...
cd /d %~dp0micro-apps\content-management
call npm install
echo.
echo [4/5] Installing user-management dependencies...
cd /d %~dp0micro-apps\user-management
call npm install
echo.
echo [5/5] Installing settings dependencies...
cd /d %~dp0micro-apps\settings
call npm install
echo.
echo All dependencies installed successfully!
echo You can now run start-all.bat to start all services.
echo.
cd /d %~dp0
pause
核心功能解析：
-
脚本头部配置
@echo off：关闭命令回显，使输出更清洁- 显示安装进度提示信息
-
依赖安装流程
- 步骤1：安装根目录依赖（工作区依赖）
- 步骤2：安装主应用依赖
- 步骤3：安装内容管理微应用依赖
- 步骤4：安装用户管理微应用依赖
- 步骤5：安装系统设置微应用依赖
-
路径管理
cd /d %~dp0：切换到脚本所在目录%~dp0：获取批处理文件所在目录的绝对路径- 确保每个应用在正确的目录下安装依赖
-
错误处理
call npm install：使用call命令确保错误时不会终止脚本- 每个步骤都有明确的进度提示
使用方法：
# 双击运行或在命令行中执行
install-all.bat
2. 服务启动脚本 (start-all.bat)
脚本功能：
该批处理脚本用于一键启动所有微前端服务，包括主应用和所有微应用的开发服务器。
脚本源码分析：
@echo off
echo Starting all micro-frontend services...
echo.
echo Starting content-management on port 8081...
start "content-management" cmd /k "cd /d %~dp0micro-apps\content-management && npm run dev"
timeout /t 2 /nobreak >nul
echo Starting user-management on port 8082...
start "user-management" cmd /k "cd /d %~dp0micro-apps\user-management && npm run dev"
timeout /t 2 /nobreak >nul
echo Starting settings on port 8083...
start "settings" cmd /k "cd /d %~dp0micro-apps\settings && npm run dev"
timeout /t 2 /nobreak >nul
echo Starting main-app on port 8080...
start "main-app" cmd /k "cd /d %~dp0main-app && npm run dev"
echo.
echo All services are starting...
echo Main app will be available at: http://localhost:8080
echo.
pause
核心功能解析：
-
服务启动顺序
- 微应用优先：先启动所有微应用服务
- 主应用最后：最后启动主应用，确保微应用已就绪
- 端口分配：content-management(8081), user-management(8082), settings(8083), main-app(8080)
-
窗口管理
start "窗口标题" cmd /k：为每个服务创建独立的命令窗口/k参数：保持窗口打开，便于查看日志和调试- 每个服务都有明确的窗口标题标识
-
启动间隔
timeout /t 2 /nobreak >nul：每个服务启动间隔2秒- 避免同时启动造成资源竞争
- 确保前一个服务完全启动后再启动下一个
-
路径和命令
cd /d %~dp0micro-apps\content-management：切换到对应应用目录&& npm run dev：执行开发服务器启动命令- 使用
&&确保目录切换成功后才执行npm命令
服务启动流程：
1. 启动内容管理服务 (8081端口)
↓ 等待2秒
2. 启动用户管理服务 (8082端口)
↓ 等待2秒
3. 启动系统设置服务 (8083端口)
↓ 等待2秒
4. 启动主应用服务 (8080端口)
↓
5. 所有服务启动完成
使用方法：
# 双击运行或在命令行中执行
start-all.bat
注意事项：
- 确保已运行
install-all.bat安装所有依赖 - 每个服务会在独立的命令窗口中运行
- 关闭服务时需要在对应的命令窗口中按
Ctrl+C - 主应用访问地址：http://localhost:8080
3. 脚本优势对比
批处理脚本 (install-all.bat / start-all.bat) 优势：
- Windows原生支持：无需额外安装PowerShell
- 简单易用：双击即可运行
- 错误处理：使用call命令确保错误不中断流程
- 窗口管理：每个服务独立窗口，便于调试
PowerShell脚本 (install-all.ps1 / start-all.ps1) 优势：
- 跨平台支持：支持Windows、Linux、macOS
- 功能强大：支持更复杂的逻辑和错误处理
- 颜色输出：支持彩色输出，用户体验更好
- 并发执行：可以并行启动多个服务
构建和部署
1. 开发环境构建
环境要求：
- Node.js 16+
- npm 或 yarn 包管理器
- Windows 批处理支持（推荐）或 PowerShell 5.0+
安装依赖：
# 使用批处理脚本一键安装所有依赖（推荐）
install-all.bat
# 或使用PowerShell脚本
.\install-all.ps1
# 或手动安装
npm run install:all
启动开发服务器：
# 使用批处理脚本一键启动所有服务（推荐）
start-all.bat
# 或使用PowerShell脚本
.\start-all.ps1
# 或使用npm脚本
npm run dev
开发脚本配置：
{
"scripts": {
"dev": "concurrently -n \"content,users,settings,main\" -c \"cyan,green,yellow,blue\" \"npm run dev:content\" \"npm run dev:users\" \"npm run dev:settings\" \"npm run dev:main\"",
"dev:content": "cd micro-apps/content-management && npm run dev",
"dev:users": "cd micro-apps/user-management && npm run dev",
"dev:settings": "cd micro-apps/settings && npm run dev",
"dev:main": "cd main-app && npm run dev",
"install:all": "npm install && cd main-app && npm install && cd ../micro-apps/content-management && npm install && cd ../user-management && npm install && cd ../settings && npm install"
}
}
2. 生产环境构建
构建配置：
# 构建主应用
cd main-app
npm run build
# 构建微应用
cd micro-apps/content-management
npm run build
cd ../user-management
npm run build
cd ../settings
npm run build
部署配置：
- 静态文件部署：部署到CDN或静态服务器
- Nginx配置：配置反向代理和路由规则
- Docker部署：使用容器化部署方案
- CI/CD集成：自动化构建和部署流程
3. 部署配置
- Nginx配置：配置微应用路由和代理
- CDN加速：静态资源CDN分发
- 负载均衡：多实例负载均衡配置
- 监控告警：应用性能监控和告警
测试策略
1. 单元测试
// Jest测试用例
describe('Layout Component', () => {
test('should render navigation menu', () => {
render(<Layout />)
expect(screen.getByText('Content Management')).toBeInTheDocument()
expect(screen.getByText('User Management')).toBeInTheDocument()
expect(screen.getByText('Settings')).toBeInTheDocument()
})
test('should handle navigation', () => {
render(<Layout />)
const contentButton = screen.getByText('Content Management')
fireEvent.click(contentButton)
expect(window.location.pathname).toBe('/content')
})
})
2. 集成测试
- 微应用加载测试：验证微应用正确加载
- 路由切换测试：测试路由切换功能
- 通信测试：验证主应用与微应用通信
- 样式隔离测试：确保样式不冲突
3. 端到端测试
- 用户流程测试：完整用户操作流程
- 跨浏览器测试：多浏览器兼容性测试
- 性能测试：加载时间和响应性能测试
- 移动端测试：移动设备适配测试
扩展性设计
1. 模块化架构
- 插件系统：支持新的微应用插件
- 主题系统：可配置的主题和样式
- 国际化：多语言支持框架
- 权限系统：基于角色的权限控制
2. 未来扩展
- 微服务集成：与后端微服务架构集成
- PWA支持：渐进式Web应用功能
- 离线支持：离线缓存和同步机制
- 实时通信：WebSocket实时数据同步
技术亮点
1. 微前端架构
- 技术栈无关：支持不同技术栈的微应用
- 独立部署：每个微应用可独立开发部署
- 运行时集成：运行时动态加载微应用
- 样式隔离：CSS样式完全隔离
2. 开发体验
- 热更新：开发时实时更新
- 调试支持：完整的调试工具链
- 类型安全：TypeScript类型检查
- 代码分割：按需加载优化
3. 性能优化
- 懒加载：微应用按需加载
- 缓存策略：智能缓存机制
- 资源优化：构建时资源优化
- CDN加速：静态资源CDN分发
4. 团队协作
- 独立开发：团队可独立开发微应用
- 版本管理：独立的版本控制
- 发布流程：灵活的发布策略
- 监控告警：完整的监控体系
5. 开发工具链
- 一键安装：install-all.bat 自动安装所有依赖
- 一键启动：start-all.bat 自动启动所有服务
- 窗口管理：每个服务独立窗口，便于调试
- 错误处理：完善的错误处理和日志输出
总结
这个基于qiankun的微前端项目展示了现代大型前端应用的最佳实践，通过微前端架构实现了应用的模块化、团队独立开发和独立部署。项目采用了React + Vite的现代化技术栈，结合Tailwind CSS提供了优秀的开发体验和用户界面。
该项目的源码完全开源，为开发者提供了一个完整的微前端解决方案参考，特别是在微前端架构设计、开发工具链配置、团队协作和性能优化方面具有很高的学习价值。
作者信息
网站： www.itgather.com
邮箱： itgather@163.com
公众号： 全栈代码工坊
本文首发于 IT Gather 技术社区，欢迎关注我们的公众号获取更多技术分享。
附件下载
网页分享： 基于乾坤的前端微服务.rar
小通密码： ctfile://xtc17802766-f8458240343-04167e-1150
下载方法： 打开城通网盘客户端或APP，输入小通密码即可下载
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
24
0- 0
已为社区贡献1条内容
所有评论(0)