4.7 KiB

Raw Blame History

🔧 新增项目配置指南

📋 快速开始

假设要新增一个"北京"项目（环境名：beijing，type：4），按以下步骤操作：

1️⃣ 创建资源目录

mkdir src/assets/beijing

将项目特定的图片、图标等资源放入此目录。

2️⃣ 创建平面图组件（必需）

cp src/views/plan/wuhan.vue src/views/plan/beijing.vue

修改 src/views/plan/beijing.vue 中的资源引用：

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 行：添加到版本列表

const allVersions = ['wuhan', 'shiyan', 'suzhou', 'beijing']

3.2 添加构建命令

文件：package.json

在 scripts 中添加：

"build:beijing": "cross-env ASSETS_VERSION=beijing vite build"

4️⃣ 修改项目配置

文件：app.vue

4.1 设置当前项目类型

type: 4,  // 修改为新的 type 值

4.2 添加项目配置

在 typeConfig 数组中添加：

{
  type: 4,
  name: '北京项目',
  typeName: 'beijing',
  cockpit: true,  // true=有驾驶舱，false=仅平面图
  hideSidebar: true,  // 是否隐藏侧边栏
}

注意：type 值必须唯一，不能与现有项目重复。

5️⃣ 添加路由配置

文件：src/router/index.js

在 conditionalRoutes 数组中添加：

有驾驶舱（cockpit: true）

{
  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）

{
  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 数组中添加项目配置：

{
  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

如果项目有驾驶舱且需要独立组件：

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（如需要）	⚠️

🧪 测试

# 构建新项目
npm run build:beijing

# 验证构建结果
find dist -name "*beijing*"  # 应该找到
find dist -name "*wuhan*"    # 应该为空（排除其他版本）

📝 注意事项

type 值唯一性：App.vue 中的 type 值不能重复
命名一致性：typeName 应与资源目录名、构建命令中的环境名保持一致
路由路径唯一：路由路径和名称必须唯一，不能与其他项目重复
集中配置：路由映射统一在 src/config/projectRoutes.js 中配置，无需在多个文件中修改
首页重定向：所有跳转首页的操作都会跳转到 /home，然后自动重定向到对应项目首页

4.7 KiB Raw Blame History Unescape Escape