bun + vite7 的结合，孕育的 Robot Admin 【靓仔出道】（十八）

Robot_Admin项目Vite配置详解

等级：进阶 | 阅读时间：7分钟

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

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

php 复制代码

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

来源：vite.config.ts#L26-L56

插件系统

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

核心Vue插件

css 复制代码

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

vue：提供Vue 3 SFC（单文件组件）支持
vueJsx：为Vue组件启用JSX/TSX支持
vueDevTools：增强Vue DevTools集成

来源：vite.config.ts#L26-L36

UI开发插件

css 复制代码

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

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

来源：vite.config.ts#L26-L36

开发体验插件

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

javascript 复制代码

export default viteConsolePlugin({
  systemName: packageJson.name,
  version: `v${packageJson.version} (开发版)`,
  team: '信息化部-业务x室xx领域',
  owner: 'CHENY | 编号: 888888',
})

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

来源：viteConsolePluginConfig.ts#L13-L18

自动导入系统

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

API自动导入

php 复制代码

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 中。

来源：viteAutoImportConfig.ts#L13-L55

组件自动导入

php 复制代码

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图标

来源：viteComponentsConfig.ts#L15-L56

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

路径解析和别名

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

arduino 复制代码

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/...）

来源：viteResolveConfig.ts#L3-L8

开发服务器配置

开发服务器配置如下：

typescript 复制代码

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：启用热模块替换，并显示错误覆盖层
API代理 ：所有对 /api/* 的请求都代理到指定的模拟服务器，并移除 /api 前缀

来源：viteServerConfig.ts#L11-L21

构建优化

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

css 复制代码

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：禁用以加快构建过程

来源：vite.config.ts#L42-L55

依赖预打包

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

css 复制代码

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

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

来源：vite.config.ts#L38-L40

扩展配置

要扩展或修改Vite配置：

对于插件更改：

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

对于构建优化：

修改 vite.config.ts 中的build部分
如果引入新的大型依赖，考虑向 manualChunks 添加新块

对于开发服务器设置：

使用新的代理规则或服务器选项更新 viteServerConfig.ts

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

总结

Robot_Admin项目的Vite配置充分利用了Vite的强大功能，通过合理的插件配置、自动导入系统、路径别名、代码拆分等优化手段，为开发者提供了高效的开发体验和优化的生产构建。这套配置既保证了开发效率，又确保了最终产品的性能表现。

期待共建！

如果这套组件系统对你的开发工作有所启发或帮助，请不要吝啬你的 Star！每一个 ⭐ 都是对我最大的鼓励和支持。

👉 点击这里 Star 支持项目（🧧行大运摸大票💰）

🔗 探索更多资源

📋 资源类型	🔗 链接	📝 说明
🎯 在线预览	robotadmin.cn	体验完整功能演示
📚 详细文档	tzagileteam.com	深入了解实现细节
💻 源码仓库	https:/github.com/ChenyCHENYU/Robot_Admin	获取完整源代码