开始之前
- 私有化部署且有前端源码
- 熟悉 Vue 3 与 Vue Router
操作步骤
三个目录先认路
src/pages/ 放页面组件（按业务域分子目录）；src/router/index.ts 注册路由并声明 meta.permissions；src/layouts/AppMenu.vue 定义侧边栏菜单（按组拆成数组，如 productionAll）。三处都要改。
加页面
在 src/pages/ 对应业务域下建 .vue 文件。同目录现有页面就是最好的模板，照抄数据加载、分页、权限按钮的写法，不要自己发明一套。
注册路由
在 src/router/index.ts 的 appChildren 里加一条，meta.title 用 i18n key（如 menu.xxx），meta.permissions 填该页要求的权限点。i18n key 要在 src/locales/zh-CN.ts 的 menu 段里同时补上中英文，否则菜单会显示 key 名。
加入菜单
在 AppMenu.vue 对应分组的数组里加一条 { path, i18nKey, permissions, icon }。permissions 与路由保持一致 —— 不一致会出现「菜单看得见但点进去 403」或反过来。
权限点从哪来
权限点在数据库 permissions 表（共 55 个），前端只做展示级控制，真正的拦截在后端。如果新页面需要新权限点，要在后端 permissions 表插入记录、在角色里勾选，前端才能引用 —— 前端硬写一个不存在的 code，权限判断永远为 false。
构建与替换
改完 npm run build，把 dist 产物替换到站点目录（或按你们的部署方式）。注意浏览器缓存：改了资源指纹后一般会自动失效，但 index.html 常被 CDN 缓存，必要时手动刷新。
代码示例
{
path: 'workshop-stat',
name: 'workshop-stat',
component: () => import('@/pages/reports/WorkshopStatPage.vue'),
meta: {
title: () => i18n.global.t('menu.workshopStat'),
permissions: ['report.view'], // 与 AppMenu 保持一致
},
},// 放进合适的分组数组（例如 dataCenterAll / productionAll）
{
path: '/reports/workshop-stat',
i18nKey: 'menu.workshopStat',
permissions: ['report.view'],
icon: DataAnalysis, // 从 @element-plus/icons-vue 引入
},menu: {
// ...
workshopStat: '车间统计',
},示例中的域名、租户编码、密钥请替换成你自己的。生产环境不要把密钥写进前端代码。