Vite构建工具Skill vite

---

name: vite description: Vite构建工具配置、插件API、SSR以及Vite 8 Rolldown迁移。在Vite项目、vite.config.ts、Vite插件或使用Vite构建库/SSR应用时使用。 license: MIT metadata: author: Anthony Fu version: “2026.1.31” source: 生成自 https://github.com/vitejs/vite，脚本在 https://github.com/antfu/skills

Vite

基于Vite 8 beta（由Rolldown驱动）。Vite 8使用Rolldown打包器和Oxc转换器。

Vite是一个下一代前端构建工具，提供快速的开发服务器（原生ESM + HMR）和优化的生产构建。

偏好设置

• 使用TypeScript：偏好 vite.config.ts
• 始终使用ESM，避免CommonJS

核心

主题	描述	参考
配置	vite.config.ts、defineConfig、条件配置、loadEnv	core-config
功能	import.meta.glob、资源查询（?raw、?url）、import.meta.env、HMR API	core-features
插件API	Vite特定钩子、虚拟模块、插件排序	core-plugin-api

构建与SSR

主题	描述	参考
构建与SSR	库模式、SSR中间件模式、ssrLoadModule、JavaScript API	build-and-ssr

高级

主题	描述	参考
环境API	Vite 6+多环境支持、自定义运行时	environment-api
Rolldown迁移	Vite 8变更：Rolldown打包器、Oxc转换器、配置迁移	rolldown-migration

快速参考

CLI命令

vite              # 启动开发服务器
vite build        # 生产构建
vite preview      # 预览生产构建
vite build --ssr  # SSR构建

常见配置

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  resolve: { alias: { '@': '/src' } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { target: 'esnext', outDir: 'dist' },
})

官方插件

• @vitejs/plugin-vue - Vue 3 SFC支持
• @vitejs/plugin-vue-jsx - Vue 3 JSX
• @vitejs/plugin-react - 使用Oxc/Babel的React
• @vitejs/plugin-react-swc - 使用SWC的React
• @vitejs/plugin-legacy - 旧版浏览器支持

跨技能参考

• 测试 → 使用 vitest 技能（Vite原生测试）
• Vue项目 → 使用 vue 技能获取组件模式
• 库打包 → 使用 tsdown 技能用于TypeScript库