当前位置： 首页 > news >正文

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

news 2025/8/25 5:26:58

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-vendorvue, vue-router, pinia核心框架库
ui-vendornaive-ui, @iconify/vueUI组件和图标
chart-vendorecharts, @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

获取完整源代码

非常期待听到你的想法！

http://www.dtcms.com/a/348048.html

相关文章：

  • K8s部署MySQL8.0数据库
  • Transformer实战（13）——从零开始训练GPT-2语言模型
  • 【go语言】字符串函数
  • imx6ull-驱动开发篇39——Linux INPUT 子系统实验
  • 05-ArkUI界面开发
  • Solidity学习笔记
  • ZKmall模块商城的推荐数据体系：从多维度采集到高效存储的实践
  • 用 Bright Data MCP Server 构建实时数据驱动的 AI 情报系统：从市场调研到技术追踪的自动化实战
  • 青少年软件编程（python五级）等级考试试卷-客观题（2024年6月）
  • 数据库原理及应用_数据库基础_第2章关系数据库标准语言SQL_数据的维护
  • Adobe CS6所有系列绿色免安装版，Photoshop 6 Adobe Illustrator CS6 等绿色版
  • Spring创建的方式
  • 使用 Frida 运行时检测 Android 应用的真实权限状态 (App Ops)
  • 第4章栈和队列：顺序队——基本结构
  • Java 基础学习总结（211）—— Apache Commons ValidationUtils：让参数校验从 “体力活“ 变 “优雅事“
  • Vue状态管理工具pinia的使用以及Vue组件通讯
  • 一个byte表示多个bool属性的功能
  • 高并发AI服务部署方案：vLLM、TGI、FastChat性能压测报告
  • CSS 进阶用法
  • Read View是实现MVCC的三大前提之一，那么它是在什么时候建立的
  • frida安装配置及其使用方法
  • 一个奇怪的问题-Python会替代Java吗？技术语言之争的真相-优雅草卓伊凡
  • Java 大视界 -- Java 大数据在智能交通智能公交系统中的乘客流量预测与车辆调度优化
  • 程序里的依赖和中间件的依赖冲突，怎么解决
  • Docling：一个基于AI驱动的免费文档解析工具
  • Python性能优化实战（二）：让循环跑得比博尔特还快
  • [身份验证脚手架] 应用布局如何构建
  • 初学python的我开始Leetcode题-16
  • CTFshow系列——命令执行web49-52
  • assert使用方法