中后台愈发混乱后我用插件化把它救回来了

作者：袖梨 2026-07-16

背景

文档地址、演示地址、源码地址

插件协议怎么定

 复制代码export interface AdminPlugin {
  id: string // 插件唯一标识
  name: string // 插件名称
  version: string // 插件版本
  enabled?: boolean // 默认是否启用
  order?: number // 注册顺序
  dependsOn?: string[] // 依赖的插件 id
  routes?: AdminRouteRecordRaw[] // 插件提供的路由
  menus?: MenuConfig[] // 插件提供的菜单
  locales?: {
    'zh-CN'?: Record<string, any>
    en?: Record<string, any>
  } // 插件自己的语言包
  install?: (app: App, context: PluginContext) => void | Promise<void> // 初始化钩子
}

我比较在意的一点是，插件要把自己的边界说清楚，而不是嘴上说自己是“独立模块”，代码里还在不停伸手改宿主，所以后面的插件架构要设计好，大概做了以下功能点

项目预览

插件功能点

定了一套统一的插件协议，把 id、name、version、enabled、order、dependsOn、routes、menus、locales、install 这些字段先收口
插件注册排序，用 order 控制接入顺序
默认启用控制，通过 enabled 配置插件初始状态
依赖声明和依赖校验，避免插件在缺少前置模块时硬挂进来
️ 冲突检测，主要拦重复插件 id、路由 path / name 和菜单 path
插件路由注册，把页面入口统一挂到宿主路由系统
️ 插件菜单收集，把各业务插件的导航配置汇总到宿主
语言包合并，让插件自己的 locales 能注入到宿主
install 钩子，方便插件做自己的初始化
运行时插件清单，宿主能拿到当前注册过的插件信息
插件启停能力，支持在运行时打开或关闭某个插件
启停状态持久化到 localStorage
刷新后恢复插件状态，宿主重新引导时继续使用本地启停结果

一个插件长什么样

 复制代码const reportPlugin: AdminPlugin = {
  id: 'plugin-report',
  name: '报表插件',
  version: '1.0.0',
  order: 20,
  dependsOn: ['plugin-shop'],
  routes: [
    {
      path: '/report/list',
      name: 'ReportList',
      component: () => import('./views/ReportList.vue'),
      meta: {
        title: 'report.list',
        layout: 'default',
        permissions: ['report.read']
      }
    },
    {
      path: '/report/detail/:id',
      name: 'ReportDetail',
      component: () => import('./views/ReportDetail.vue'),
      meta: {
        title: 'report.detail',
        layout: 'default',
        permissions: ['report.read'],
        activeMenu: '/report/list',
        noCache: true,
        hidden: true
      }
    }
  ],
  menus: [
    {
      path: '/report',
      title: 'report.title',
      icon: 'chart',
      children: [
        {
          path: '/report/list',
          title: 'report.list'
        }
      ]
    }
  ]
}