前端服务共享

2025-12-11 14:21:36 +08:00
parent fa3dbe0496
commit 5ee9770747
46 changed files with 3732 additions and 1782 deletions
--- a/urbanLifelineWeb/README.md
+++ b/urbanLifelineWeb/README.md
@@ -1,6 +1,8 @@
 # Urban Lifeline Web 微前端项目

-基于 Import Maps 的微前端架构，包含共享模块和多个业务应用。
+基于 **@module-federation/vite** 的微前端架构，包含共享模块和多个业务应用。
+
+> ✨ **v2.0 升级**：已从 `@originjs/vite-plugin-federation` 迁移到官方维护的 `@module-federation/vite`，获得更好的开发体验和稳定性！

 ## 📦 项目结构

@@ -19,40 +21,43 @@ urbanLifelineWeb/
 ### 1. 安装依赖

 ```bash
-# 一键安装所有包的依赖
-npm run install:all
+# 使用 pnpm 安装（推荐）
+pnpm install

-# 或单独安装
-npm run install:shared
-npm run install:platform
-npm run install:bidding
-npm run install:workcase
+# 或使用 install.bat 脚本
+install.bat
 ```

 ### 2. 启动开发服务器

 ```bash
-# 同时启动所有服务
-npm run dev:all
+# 方式1: 使用启动脚本（Windows，推荐）
+start-all.bat

-# 或单独启动
-npm run dev:shared      # http://localhost:5000
-npm run dev:platform    # http://localhost:5001
-npm run dev:bidding     # http://localhost:5002
-npm run dev:workcase    # http://localhost:5003
+# 方式2: 使用 pnpm 并行启动所有服务
+pnpm run dev
+
+# 方式3: 手动启动（需要两个终端）
+# 终端1 - 启动 shared
+cd packages/shared
+pnpm run dev            # http://localhost:5000
+
+# 终端2 - 启动 platform
+cd packages/platform
+pnpm run dev            # http://localhost:5001
 ```

 ### 3. 构建生产版本

 ```bash
 # 构建所有应用
-npm run build:all
+pnpm run build

 # 或单独构建
-npm run build:shared
-npm run build:platform
-npm run build:bidding
-npm run build:workcase
+cd packages/shared && pnpm run build
+cd packages/platform && pnpm run build
+cd packages/bidding && pnpm run build
+cd packages/workcase && pnpm run build
 ```

 ## 🌐 端口分配
@@ -73,24 +78,144 @@ npm run build:workcase
 - **路由**: Vue Router 4.5
 - **工具库**: VueUse

-## 📝 开发说明
+## 📝 Module Federation 配置

-### Import Maps
+### Shared 配置 (packages/shared/vite.config.ts)

-本项目使用 Import Maps 实现模块共享：
+```typescript
+import { federation } from '@module-federation/vite'

-```html
-<script type="importmap">
-{
-  "imports": {
-    "@shared/components": "http://localhost:5000/shared/components.js",
-    "@shared/utils": "http://localhost:5000/shared/utils.js",
-    "@shared/api": "http://localhost:5000/shared/api.js"
-  }
-}
+export default defineConfig({
+    plugins: [
+        federation({
+            name: 'shared',
+            filename: 'remoteEntry.js',
+            exposes: {
+                './FileUpload': './src/components/fileupload/FileUpload.vue',
+                './DynamicFormItem': './src/components/dynamicFormItem/DynamicFormItem.vue',
+                './api': './src/api/index.ts',
+                './authAPI': './src/api/auth/auth.ts',
+                './fileAPI': './src/api/file/file.ts',
+                './utils': './src/utils/index.ts',
+                './types': './src/types/index.ts',
+                './components': './src/components/index.ts'
+            },
+            shared: {
+                vue: {},
+                'vue-router': {},
+                'element-plus': {},
+                '@element-plus/icons-vue': {},
+                axios: {}
+            }
+        })
+    ],
+    server: {
+        port: 5000,
+        strictPort: true,  // 关键：锁定端口，避免漂移
+        host: true,
+        cors: true
+    }
+})
+```
+
+### Platform 配置 (packages/platform/vite.config.ts)
+
+```typescript
+import { federation } from '@module-federation/vite'
+
+export default defineConfig({
+    plugins: [
+        federation({
+            name: 'platform',
+            remotes: {
+                shared: {
+                    type: 'module',  // 关键：必须指定 ES module 类型
+                    name: 'shared',
+                    entry: 'http://localhost:5000/remoteEntry.js'
+                }
+            },
+            shared: {
+                vue: {},
+                'vue-router': {},
+                'element-plus': {},
+                axios: {}
+            }
+        })
+    ]
+})
+```
+
+### 使用示例
+
+```typescript
+// 在 platform 中导入 shared 的组件
+import FileUpload from 'shared/FileUpload'
+import DynamicFormItem from 'shared/DynamicFormItem'
+import { authAPI } from 'shared/authAPI'
+import { getAesInstance } from 'shared/utils'
+import type { LoginParam, SysUserVO } from 'shared/types'
+
+// 在组件中使用
+<template>
+    <FileUpload mode="cover" v-model:coverImg="image" />
+    <DynamicFormItem :config="config" v-model="value" />
+</template>
+
+<script setup lang="ts">
+// 调用 API
+const result = await authAPI.login(params)
 </script>
 ```

+### 优势
+
+- ✅ **开发模式直接支持**：无需构建，直接 dev 即可
+- ✅ **完整的热更新**：修改 shared 代码自动更新到 platform
+- ✅ **自动路径处理**：无需关心 shared 内部的 `@/` 路径
+- ✅ **依赖去重**：vue、element-plus 等只加载一次
+- ✅ **企业级稳定**：官方维护，支持 Vite 6
+
+## 🎯 开发工作流
+
+### 日常开发
+
+1. **启动服务**（每天开始）
+   ```bash
+   # 使用脚本一键启动
+   start-all.bat
+   
+   # 或手动启动
+   cd packages/shared && pnpm run dev  # 终端1
+   cd packages/platform && pnpm run dev  # 终端2
+   ```
+
+2. **修改代码**
+   - 修改 shared 组件 → 保存 → 自动热更新 ✨
+   - 修改 platform 页面 → 保存 → 自动热更新 ✨
+
+3. **结束开发**
+   - 按 Ctrl+C 停止所有服务
+
+### 添加新的共享模块
+
+1. **在 shared 中创建组件**
+   ```bash
+   # 例如创建新组件
+   packages/shared/src/components/mynew/MyNewComponent.vue
+   ```
+
+2. **在 shared/vite.config.ts 中暴露**
+   ```typescript
+   exposes: {
+       './MyNewComponent': './src/components/mynew/MyNewComponent.vue'
+   }
+   ```
+
+3. **在 platform 中使用**
+   ```typescript
+   import MyNewComponent from 'shared/MyNewComponent'
+   ```
+
 ### API 代理

 所有应用的 `/api` 请求会代理到后端服务 `http://localhost:8080`
@@ -101,7 +226,8 @@ npm run build:workcase

 ## 🔥 注意事项

-1. **启动顺序**: 建议先启动 `shared` 服务，再启动其他应用
-2. **端口占用**: 确保 5000-5003 端口未被占用
-3. **Node 版本**: 建议使用 Node.js 18+ 
-4. **依赖安装**: 首次运行前必须执行 `npm run install:all`
+1. **包管理器**: 必须使用 pnpm（项目使用 pnpm workspace）
+2. **启动顺序**: 必须先启动 `shared` 服务（5000端口），再启动其他应用
+3. **端口占用**: 确保 5000-5003 端口未被占用，shared 使用 strictPort 模式
+4. **Node 版本**: 建议使用 Node.js 18+
+5. **Module Federation**: remoteEntry.js 路径为 `http://localhost:5000/remoteEntry.js`（不是 /assets/）