211 lines
4.7 KiB
Markdown
211 lines
4.7 KiB
Markdown
# 🔧 新增项目配置指南
|
||
|
||
## 📋 快速开始
|
||
|
||
假设要新增一个"北京"项目（环境名：`beijing`，type：`4`），按以下步骤操作：
|
||
|
||
---
|
||
|
||
## 1️⃣ 创建资源目录
|
||
|
||
```bash
|
||
mkdir src/assets/beijing
|
||
```
|
||
|
||
将项目特定的图片、图标等资源放入此目录。
|
||
|
||
---
|
||
|
||
## 2️⃣ 创建平面图组件（必需）
|
||
|
||
```bash
|
||
cp src/views/plan/wuhan.vue src/views/plan/beijing.vue
|
||
```
|
||
|
||
修改 `src/views/plan/beijing.vue` 中的资源引用：
|
||
|
||
```javascript
|
||
const assetsVersion = import.meta.env.VITE_ASSETS_VERSION || 'beijing'
|
||
const backgroundImage = new URL(`../../assets/${assetsVersion}/beijing-bg.png`, import.meta.url).href
|
||
```
|
||
|
||
---
|
||
|
||
## 3️⃣ 修改构建配置
|
||
|
||
### 3.1 更新插件配置
|
||
|
||
**文件**：`vite/plugins/conditional-assets.js`
|
||
|
||
**第 13 行**：添加到版本列表
|
||
|
||
```javascript
|
||
const allVersions = ['wuhan', 'shiyan', 'suzhou', 'beijing']
|
||
```
|
||
|
||
### 3.2 添加构建命令
|
||
|
||
**文件**：`package.json`
|
||
|
||
在 `scripts` 中添加：
|
||
|
||
```json
|
||
"build:beijing": "cross-env ASSETS_VERSION=beijing vite build"
|
||
```
|
||
|
||
---
|
||
|
||
## 4️⃣ 修改项目配置
|
||
|
||
**文件**：`app.vue`
|
||
|
||
### 4.1 设置当前项目类型
|
||
|
||
```javascript
|
||
type: 4, // 修改为新的 type 值
|
||
```
|
||
|
||
### 4.2 添加项目配置
|
||
|
||
在 `typeConfig` 数组中添加：
|
||
|
||
```javascript
|
||
{
|
||
type: 4,
|
||
name: '北京项目',
|
||
typeName: 'beijing',
|
||
cockpit: true, // true=有驾驶舱，false=仅平面图
|
||
hideSidebar: true, // 是否隐藏侧边栏
|
||
}
|
||
```
|
||
|
||
**注意**：`type` 值必须唯一，不能与现有项目重复。
|
||
|
||
---
|
||
|
||
## 5️⃣ 添加路由配置
|
||
|
||
**文件**：`src/router/index.js`
|
||
|
||
在 `conditionalRoutes` 数组中添加：
|
||
|
||
### 有驾驶舱（cockpit: true）
|
||
|
||
```javascript
|
||
{
|
||
path: '/beijing-cockpit',
|
||
component: Layout,
|
||
redirect: '/beijing-cockpit/index',
|
||
hidden: true,
|
||
children: [
|
||
{
|
||
path: 'index',
|
||
hidden: true,
|
||
component: () => import('@/views/index'),
|
||
name: 'beijing-cockpit',
|
||
meta: { title: '驾驶舱', icon: 'plan' }
|
||
},
|
||
]
|
||
}
|
||
```
|
||
|
||
### 仅平面图（cockpit: false）
|
||
|
||
```javascript
|
||
{
|
||
path: '/beijing-plan',
|
||
component: Layout,
|
||
redirect: '/beijing-plan/index',
|
||
hidden: false,
|
||
children: [
|
||
{
|
||
path: 'index',
|
||
component: () => import('@/views/plan/beijing.vue'),
|
||
name: 'beijing-plan',
|
||
meta: { title: '平面图', icon: 'plan', menuTitle: '北京平面图' }
|
||
},
|
||
]
|
||
}
|
||
```
|
||
|
||
**路由命名规范**：
|
||
- 驾驶舱：`/{typeName}-cockpit`
|
||
- 平面图：`/{typeName}-plan`
|
||
|
||
---
|
||
|
||
## 6️⃣ 添加路由映射配置（集中配置）
|
||
|
||
**文件**：`src/config/projectRoutes.js`
|
||
|
||
在 `projectRouteConfig` 数组中添加项目配置：
|
||
|
||
```javascript
|
||
{
|
||
type: 4,
|
||
typeName: 'beijing',
|
||
name: '北京项目',
|
||
routePath: '/beijing-cockpit', // 或 '/beijing-plan'
|
||
routeName: 'beijing-cockpit', // 或 'beijing-plan'
|
||
cockpit: true,
|
||
}
|
||
```
|
||
|
||
**说明**：此配置会自动应用到以下位置，无需手动修改：
|
||
- ✅ 首页重定向（`src/views/home.vue`）
|
||
- ✅ 侧边栏隐藏配置（`src/store/modules/config.js`）
|
||
- ✅ 权限路由选择（`src/store/modules/permission.js`）
|
||
- ✅ 面包屑导航（`src/components/Breadcrumb/index.vue`）
|
||
- ✅ 标签页导航（`src/layout/components/TagsView/index.vue`）
|
||
|
||
---
|
||
|
||
## 8️⃣ （可选）创建独立 Dashboard
|
||
|
||
如果项目有驾驶舱且需要独立组件：
|
||
|
||
```bash
|
||
mkdir src/views/beijing_dashboard
|
||
cp src/views/dashboard/index.vue src/views/beijing_dashboard/index.vue
|
||
```
|
||
|
||
然后在路由中使用 `@/views/beijing_dashboard/index.vue`。
|
||
|
||
---
|
||
|
||
## ✅ 配置清单
|
||
|
||
| 文件/目录 | 操作 | 必需 |
|
||
|---------|------|------|
|
||
| `src/assets/beijing/` | 创建资源目录 | ✅ |
|
||
| `src/views/plan/beijing.vue` | 创建平面图组件 | ✅ |
|
||
| `vite/plugins/conditional-assets.js` | 添加到 `allVersions` | ✅ |
|
||
| `package.json` | 添加 `build:beijing` 命令 | ✅ |
|
||
| `public/config.js` | 添加 `typeConfig` 配置 | ✅ |
|
||
| `src/router/index.js` | 添加路由配置 | ✅ |
|
||
| `src/config/projectRoutes.js` | 添加路由映射配置 | ✅ |
|
||
| `src/views/beijing_dashboard/` | 创建 dashboard（如需要） | ⚠️ |
|
||
|
||
---
|
||
|
||
## 🧪 测试
|
||
|
||
```bash
|
||
# 构建新项目
|
||
npm run build:beijing
|
||
|
||
# 验证构建结果
|
||
find dist -name "*beijing*" # 应该找到
|
||
find dist -name "*wuhan*" # 应该为空（排除其他版本）
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 注意事项
|
||
|
||
1. **type 值唯一性**：`App.vue` 中的 `type` 值不能重复
|
||
2. **命名一致性**：`typeName` 应与资源目录名、构建命令中的环境名保持一致
|
||
3. **路由路径唯一**：路由路径和名称必须唯一，不能与其他项目重复
|
||
4. **集中配置**：路由映射统一在 `src/config/projectRoutes.js` 中配置，无需在多个文件中修改
|
||
5. **首页重定向**：所有跳转首页的操作都会跳转到 `/home`，然后自动重定向到对应项目首页
|