配置说明

Vite 配置 (vite.config.ts)

项目使用 Vite 作为构建工具，主要配置如下：

插件列表

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    // 1. UniApp Manifest 配置
    UniHelperManifest(),

    // 2. UniApp Pages 配置（基于文件系统路由）
    UniHelperPages({
      dts: 'src/uni-pages.d.ts',
      subPackages: ['src/pages-core', 'src/pages-system'],
    }),

    // 3. UniApp Layouts 配置
    UniHelperLayouts(),

    // 4. UniApp Components 自动注册
    UniHelperComponents({
      resolvers: [WotResolver(), UniEchartsResolver()],
      dirs: ['src/components', 'src/business'],
    }),

    // 5. 根路径处理
    UniKuRoot(),

    // 6. ECharts 支持
    UniEcharts(),

    // 7. UniApp 插件
    Uni(),

    // 8. 包体积优化
    Optimization({ enable: true }),

    // 9. API 自动导入
    AutoImport({
      imports: ['vue', '@vueuse/core', 'pinia', 'uni-app', {
        from: '@wot-ui/router',
        imports: ['createRouter', 'useRouter', 'useRoute'],
      }, {
        from: '@wot-ui/ui',
        imports: ['useToast', 'useDialog', 'useNotify', 'CommonUtil'],
      }, {
        from: 'alova/client',
        imports: ['usePagination', 'useRequest'],
      }],
      dirs: ['src/composables', 'src/store', 'src/hooks'],
    }),

    // 10. UnoCSS 原子化 CSS
    UnoCSS(),
  ],
})

关键配置说明

UniHelperPages

基于文件系统的路由配置：

• dts: 生成页面路由类型声明文件
• subPackages: 分包配置
• exclude: 排除不需要作为页面的文件（如 components）

UniHelperComponents

组件自动注册配置：

• resolvers: 组件解析器（WotResolver 解析 wot-ui 组件）
• dirs: 组件扫描目录
• directoryAsNamespace: 使用目录名作为命名空间

AutoImport

API 自动导入配置：

• imports: 自动导入的库和模块
• dirs: 自动扫描的目录（composables, store, hooks）
• vueTemplate: 支持模板中直接使用

---

Pages 配置 (pages.config.ts)

全局页面配置，对应 UniApp 的 pages.json：

export default defineUniPages({
  easycom: {
    autoscan: true,
    custom: {
      '^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)': 
        'z-paging/components/z-paging$1/z-paging$1.vue',
    },
  },
  pages: [],
  globalStyle: {
    navigationBarBackgroundColor: '@navBgColor',
    navigationBarTextStyle: '@navTxtStyle',
    navigationBarTitleText: '中台管理',
    backgroundColor: '@bgColor',
    enablePullDownRefresh: false,
    animationType: 'pop-in',
    animationDuration: 300,
  },
  tabBar: {
    custom: true,
    height: '0',
    list: [
      { pagePath: 'pages/workbench/index' },
      { pagePath: 'pages/msg/index' },
      { pagePath: 'pages/mine/index' },
    ],
  },
})

关键配置

EasyCom

自定义组件自动注册规则，这里配置了 z-paging 组件的自动导入规则。

GlobalStyle

全局样式配置，使用变量引用：

• @navBgColor: 导航栏背景色
• @navTxtStyle: 导航栏文字颜色
• @bgColor: 页面背景色

TabBar

自定义 TabBar 配置：

• custom: 启用自定义 TabBar
• list: TabBar 页面列表（工作台、消息、我的）

---

Alova 配置 (alova.config.ts)

API 代码生成配置：

export default <Config>{
  generator: [
    {
      input: 'http://localhost:16010/doc/admin/swagger/admin/swagger.json',
      output: 'src/api/admin',
      global: 'AdminApis',
      platform: 'swagger',
      type: 'typescript',
      version: 3,
      responseMediaType: 'application/json',
      bodyMediaType: 'application/json',
      handleApi: (apiDescriptor) => {
        // 过滤已废弃的 API
        if (apiDescriptor.deprecated) {
          return undefined // 跳过该 API
        }
        // 从 url 中提取最后一段作为方法名，统一转为 camelCase
        const urlParts = apiDescriptor.url.split('/').filter(Boolean)
        const lastSegment = urlParts[urlParts.length - 1] || ''
        const methodName = lastSegment
          .replace(/[-_]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''))
          .replace(/^([A-Z])/, m => m.toLowerCase())
        apiDescriptor.operationId = methodName

        return apiDescriptor
      },
    },
    // ... 其他生成器配置
  ],
  autoUpdate: {
    launchEditor: false,
    interval: 5 * 60 * 1000, // 5分钟检查一次
  },
}

配置项说明

• input: Swagger/OpenAPI 文档地址或本地文件
• output: 代码输出目录
• global: 全局 API 访问名称，格式为 {项目名}Apis，其中 {项目名} 是项目的唯一命名前缀
  • 示例：'AdminApis' 表示 Admin 为项目唯一命名前缀 + Apis 后缀
  • 当配置多个 generator 时必须设置且不能重复（如：AdminApis、DevApis、DemoApis）
• platform: 平台类型（目前仅支持 swagger）
• type: 生成代码类型（typescript/javascript）
• version: OpenAPI 版本（2 或 3，默认 auto）
• responseMediaType: 响应数据的媒体类型（默认 application/json）
• bodyMediaType: 请求体的媒体类型（默认 application/json）
• handleApi: API 过滤和转换函数
  • 返回 undefined 可跳过该 API（如废弃接口）
  • 可自定义方法名转换逻辑（示例中从 URL 提取最后一段并转为 camelCase）
• autoUpdate: 自动更新配置

---

UnoCSS 配置 (uno.config.ts)

原子化 CSS 引擎配置，详见 样式规范。

---

环境变量

项目支持多环境配置：

.env.development

开发环境变量配置示例：

# API 基础地址
VITE_API_BASE_URL=http://localhost:16010

# 其他开发环境特有配置

环境变量使用

在代码中使用：

const apiUrl = import.meta.env.VITE_API_BASE_URL

---

TypeScript 配置

tsconfig.base.json

基础 TypeScript 配置，包含：

• 编译选项（target, module, strict 等）
• 路径别名配置
• Vue 和 UniApp 类型支持

tsconfig.json

主配置文件，继承基础配置并添加项目特定配置。