urbanLifeline/urbanLifelineWeb/README.md

Urban Lifeline Web 微前端项目

基于 Import Maps 的微前端架构，包含共享模块和多个业务应用。

📦 项目结构

urbanLifelineWeb/
├── packages/
│   ├── shared/          # 共享模块 (端口 5000)
│   ├── platform/        # 主平台应用 (端口 5001)
│   ├── bidding/         # 招标管理应用 (端口 5002)
│   └── workcase/        # 案例管理应用 (端口 5003)
└── package.json

🚀 快速开始

1. 安装依赖

# 一键安装所有包的依赖
npm run install:all

# 或单独安装
npm run install:shared
npm run install:platform
npm run install:bidding
npm run install:workcase

2. 启动开发服务器

# 同时启动所有服务
npm run dev:all

# 或单独启动
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

3. 构建生产版本

# 构建所有应用
npm run build:all

# 或单独构建
npm run build:shared
npm run build:platform
npm run build:bidding
npm run build:workcase

🌐 端口分配

服务	端口	说明
Shared	5000	共享组件和工具库
Platform	5001	主平台应用
Bidding	5002	招标管理应用
Workcase	5003	案例管理应用

🔧 技术栈

• 框架: Vue 3.5 + TypeScript
• 构建工具: Vite 6.0
• UI 组件库: Element Plus 2.9
• 状态管理: Pinia 2.2
• 路由: Vue Router 4.5
• 工具库: VueUse

📝 开发说明

Import Maps

本项目使用 Import Maps 实现模块共享：

<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"
  }
}
</script>

API 代理

所有应用的 /api 请求会代理到后端服务 http://localhost:8080

跨域配置

开发环境下所有服务已启用 CORS，支持跨域访问。

🔥 注意事项

1. 启动顺序: 建议先启动 shared 服务，再启动其他应用
2. 端口占用: 确保 5000-5003 端口未被占用
3. Node 版本: 建议使用 Node.js 18+
4. 依赖安装: 首次运行前必须执行 npm run install:all