Robot Admin Vite 配置使用指南

⚡ 闪电般的构建工具

使用Vite提供极速开发体验和优化生产构建，通过模块化配置和丰富插件系统提升开发效率

Robot_Admin 项目使用 Vite 作为其构建工具，以提供闪电般的开发体验和优化的生产构建。本文档解释了 Vite 在该项目中的配置方式，帮助您了解其功能以及如何在需要时进行扩展。

项目采用模块化方法进行 Vite 配置，主要设置定义在 vite.config.ts 中，而专用配置则组织在 src/config/vite 目录下。

🎯 配置结构概览

框架提供了以下 Vite 配置组织结构：

配置模块	目的	关键特性
插件系统	增强开发体验	Vue3、JSX、DevTools、UnoCSS
自动导入	提升开发效率	API 自动导入、组件自动注册
路径解析	简化模块导入	别名配置、路径映射
开发服务器	开发环境配置	HMR、代理、端口设置
构建优化	生产构建优化	代码拆分、依赖预打包

主要配置结构

// 主要Vite配置结构
export default defineConfig({
  plugins: [...],
  resolve: resolveConfig,
  optimizeDeps: {...},
  server: serverConfig,
  build: {...}
})

🔌 插件系统

项目使用了一套丰富的插件，以增强开发体验并优化构建过程。

核心 Vue 插件

Vue插件配置

plugins: [
  vue(),
  vueJsx(),
  vueDevTools(),
  // 其他插件...
];

插件功能

插件	功能	重要性
vue	提供 Vue 3 SFC 支持	🔴 关键
vueJsx	启用 JSX/TSX 支持	🟡 重要
vueDevTools	增强 Vue DevTools 集成	🟡 重要

UI 开发插件

UI插件配置

plugins: [
  Unocss(),
  Icons({ autoInstall: true }),
  // 其他插件...
];

• UnoCSS：以实用为先的 CSS 引擎，提供原子 CSS 功能
• Icons：使用 Iconify 系统按需自动安装和导入图标

开发体验插件

项目包括一个自定义控制台插件，在开发期间在浏览器控制台显示项目信息：

控制台插件配置

export default viteConsolePlugin({
  systemName: packageJson.name,
  version: `v${packageJson.version} (开发版)`,
  team: "信息化部-业务2室西安领域",
  owner: "CHENY | 编号: 409322",
});

这有助于开发人员在开发过程中识别项目版本和所有权信息。

🚀 自动导入系统

其中一个关键的生产力特性是自动导入系统，它消除了手动导入常用 API 和组件的需要。

API 自动导入

API自动导入配置

export default AutoImport({
  imports: [
    "vue",
    "vue-router",
    "pinia",
    {
      "@vueuse/core": ["useLocalStorage", "useClipboard", "useDebounceFn"],
    },
    {
      "naive-ui": [
        "useDialog",
        "useMessage",
        // 许多UI组件...
      ],
    },
  ],
  dts: "src/types/auto-imports.d.ts",
  dirs: ["src/stores", "src/composables", "src/hooks"],
  vueTemplate: true,
});

此配置允许您使用 Vue、Vue Router、Pinia API 和选定的 VueUse 函数，而无需显式导入。TypeScript 定义将自动生成在src/types/auto-imports.d.ts中。

组件自动导入

组件自动导入配置

export default Components({
  dts: "src/types/components.d.ts",
  dirs: ["src/components/global", "src/components/local"],
  extensions: ["vue"],
  version: 3,
  resolvers: [
    NaiveUiResolver(),
    // 自定义组件解析器
    // 图标解析器
  ],
  globs: [
    "src/components/global/C_*/index.vue",
    "src/components/local/c_*/index.vue",
  ],
  directives: true,
});

这启用了以下约定的组件自动注册：

• 全局组件在 src/components/global/C_*/index.vue
• 局部组件在 src/components/local/c_*/index.vue
• 无需显式导入的 Naive UI 组件
• 使用 icon 前缀的 Iconify 图标

💡 自动注册优势

这确保它们可以自动使用，无需手动导入！

📁 路径解析和别名

项目定义了有用的路径别名，以使导入更干净、更易于维护：

路径别名配置

export default {
  alias: {
    "@": fileURLToPath(new URL("../../../src", import.meta.url)),
    _views: fileURLToPath(new URL("../../../src/views", import.meta.url)),
  },
};

这些别名允许您使用以下方式导入模块：

• @/components/...（指向 src/components/...）
• _views/...（指向 src/views/...）

🖥️ 开发服务器配置

开发服务器配置如下：

服务器配置

export default {
  port: 1988,
  hmr: { overlay: true },
  proxy: {
    "^/api": {
      target: "https://apifoxmock.com/m1/4902805-4559325-default",
      changeOrigin: true,
      rewrite: (path: string) => path.replace(/^\/api/, ""),
    },
  },
};

配置说明

配置项	值	说明
端口	1988	开发服务器运行端口
HMR	overlay: true	启用热模块替换和错误覆盖层
API 代理	/api/* → 模拟服务器	代理 API 请求并移除/api 前缀

🏗️ 构建优化

项目包括几个针对生产部署的构建优化：

构建配置

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vue-vendor': ['vue', 'vue-router', 'pinia'],
        'ui-vendor': ['naive-ui', '@iconify/vue'],
        'chart-vendor': ['echarts', '@antv/x6'],
        'editor-vendor': ['@kangc/v-md-editor', 'wangeditor'],
      },
    },
  },
  chunkSizeWarningLimit: 1000,
  reportCompressedSize: false,
}

代码拆分策略

项目实施了一种战略性的代码拆分方法：

块名称	包含库	目的
vue-vendor	vue, vue-router, pinia	核心框架库
ui-vendor	naive-ui, @iconify/vue	UI 组件和图标
chart-vendor	echarts, @antv/x6	可视化库
editor-vendor	@kangc/v-md-editor, wangeditor	富文本编辑库

这种拆分策略通过将常用库与专用库分开，有助于优化初始加载时间。

性能设置

• chunkSizeWarningLimit：设置为 1000KB（从默认的 500KB 增加）
• reportCompressedSize：禁用以加快构建过程

⚡ 依赖预打包

项目预打包某些依赖以改善启动时间：

依赖预打包配置

optimizeDeps: {
  include: ['vue', 'naive-ui'],
},

此配置确保 Vue 和 Naive UI 在开发过程中预打包，从而提高模块解析速度和改进 HMR 性能。

🛠️ 扩展配置

配置修改指南

修改类型	操作步骤	重要性
插件更改	添加到 vite.config.ts 或创建新配置文件	🔴 关键
构建优化	修改 build 部分，考虑添加新块	🟡 重要
开发服务器设置	更新 viteServerConfig.ts	🟡 重要

修改步骤

插件扩展示例

// 对于插件更改：
// 1. 将新插件添加到vite.config.ts中的插件数组
// 2. 或在src/config/vite/中创建新的配置文件，并从src/config/vite/index.ts中导出

plugins: [
  // 现有插件...
  newPlugin({
    // 插件配置
  }),
];

构建优化示例

// 对于构建优化：
// 修改vite.config.ts中的build部分
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        // 现有块...
        'new-vendor': ['new-library'],
      },
    },
  },
}

开发服务器示例

// 对于开发服务器设置：
// 使用新的代理规则或服务器选项更新viteServerConfig.ts
export default {
  port: 1988,
  proxy: {
    // 现有代理...
    "^/new-api": {
      target: "https://new-api-server.com",
      changeOrigin: true,
    },
  },
};

🎯 配置提醒

在进行配置更改后，请记得重新启动开发服务器。

---

🎯 期待共建

如果这个项目对你有帮助，请给个 Star ⭐️ 支持一下！