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

Robot_Admin项目Vite配置详解

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

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

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

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

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

---

插件系统

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

核心Vue插件

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

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

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

UI开发插件

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

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

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

开发体验插件

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

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

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

来源：viteConsolePluginConfig.ts#L13-L18

---

自动导入系统

其中一个关键的生产力特性是自动导入系统，它消除了手动导入常用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 中。

来源：viteAutoImportConfig.ts#L13-L55

组件自动导入

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

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

---

路径解析和别名

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

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

---

开发服务器配置

开发服务器配置如下：

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

---

构建优化

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

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

---

依赖预打包

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

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	获取完整源代码

非常期待听到你的想法！