name: vite description: Vite 下一代前端构建工具,具备快速热更新和优化构建功能。适用于配置 Vite、添加插件、使用开发服务器或进行生产构建。 metadata: author: Anthony Fu version: “2026.1.28” source: 生成自 https://github.com/vitejs/vite,脚本位于 https://github.com/antfu/skills
Vite 是一款面向现代前端开发的构建工具,具有基于原生 ES 模块的即时服务器启动、闪电般的热模块替换(HMR)以及使用 Rolldown/Rollup 的优化生产构建。它开箱即用地支持 TypeScript、JSX、CSS 预处理器,并拥有丰富的插件生态系统。
此技能基于 Vite 6.x,生成于 2026-01-28。
核心
| 主题 | 描述 | 参考文档 |
|---|---|---|
| 配置 | 配置文件设置、defineConfig、条件配置和异步配置 | core-config |
| CLI 命令 | 开发服务器、构建、预览命令及其选项 | core-cli |
| 核心功能 | TypeScript、JSX、CSS、HTML 处理、JSON 处理 | core-features |
| 使用插件 | 添加、配置和排序插件 | core-plugins |
功能
| 主题 | 描述 | 参考文档 |
|---|---|---|
| CSS 处理 | CSS 模块、预处理器、PostCSS、Lightning CSS | features-css |
| 静态资源 | 资源导入、公共目录、URL 处理 | features-assets |
| 全局导入 | import.meta.glob、动态导入、批量加载 | features-glob-import |
| 环境变量 | .env 文件、模式、import.meta.env 常量 | features-env |
| HMR API | 热模块替换客户端 API | features-hmr |
| Web Workers | Worker 导入和配置 | features-workers |
| 依赖预捆绑 | optimizeDeps、缓存、Monorepo 设置 | features-dep-bundling |
构建
| 主题 | 描述 | 参考文档 |
|---|---|---|
| 生产构建 | 构建选项、浏览器目标、多页面应用 | build-production |
| 库模式 | 使用正确的包导出构建库 | build-library |
| SSR | 服务器端渲染设置和配置 | build-ssr |
高级
| 主题 | 描述 | 参考文档 |
|---|---|---|
| JavaScript API | createServer、build、preview 编程式 API | advanced-api |
| 插件 API | 创建 Vite 插件、钩子、虚拟模块 | advanced-plugin-api |
| 性能 | 针对开发服务器和构建的优化技巧 | advanced-performance |
| 后端集成 | 将 Vite 与传统后端集成 | advanced-backend |