Skill: Vite

基于 Antfu Skills 集合中的 vite,让 AI 客户端在处理 Vite 项目、vite.config.ts、插件、SSR、库模式和构建问题时优先参考官方文档生成的上下文。

作用说明

vite Skill 来自 Antfu Skills 集合,由 Vite 官方文档生成并经过偏现代前端栈的整理。它适用于:

• 修改 vite.config.ts
• 配置插件、别名、环境变量、开发服务器和代理
• 排查 HMR、资源导入、import.meta.env、import.meta.glob 等问题
• 编写或调试 Vite 插件
• 处理 SSR、中间件模式、库模式构建
• 迁移到 Rolldown / Oxc 驱动的新版本 Vite

Antfu README 将 vite 归类为「由官方文档生成的 Skill」:整体不强加业务框架,但偏向 TypeScript、ESM、Composition API 等现代栈。

安装

安装 Antfu Skills 集合中的全部 Skill:

pnpx skills add antfu/skills --skill='*'

全局安装:

pnpx skills add antfu/skills --skill='*' -g

只安装 Vite Skill:

pnpx skills add antfu/skills --skill='vite'

使用方法

为了稳定触发,建议在提示词前显式声明:

use vite skill, <你的需求>

常见示例:

use vite skill, 帮我配置 vite.config.ts,添加 @ 别名和本地 API 代理

use vite skill, 这个 Vite 插件为什么 transform 钩子没有生效?

use vite skill, 把当前库项目改成 Vite library mode 构建

use vite skill, 检查项目是否有迁移到 Rolldown-powered Vite 的风险点

核心偏好

来自 vite Skill 的默认偏好:

• 优先使用 TypeScript,配置文件使用 vite.config.ts
• 始终使用 ESM,避免 CommonJS
• 使用 defineConfig 编写配置
• 通过 Vite 官方能力解决问题,避免引入不必要的脚手架封装
• 修改构建配置后运行项目现有构建命令验证

基础配置示例:

import { defineConfig } from 'vite'

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

参考范围

vite Skill 的主体会引导 AI 按需读取下列参考:

• Configuration: vite.config.ts、defineConfig、条件配置、loadEnv
• Features: import.meta.glob、资源查询 ?raw / ?url、import.meta.env、HMR API
• Plugin API: Vite 专属钩子、虚拟模块、插件顺序
• Build & SSR: 库模式、SSR middleware mode、ssrLoadModule、JavaScript API
• Environment API: Vite 6+ 的多环境支持和自定义 runtime
• Rolldown Migration: Vite 8 的 Rolldown bundler、Oxc transformer 和配置迁移

常用命令

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

项目里通常通过包管理器脚本运行:

pnpm dev
pnpm build
pnpm preview

官方插件

常见官方插件:

• @vitejs/plugin-vue: Vue 3 SFC 支持
• @vitejs/plugin-vue-jsx: Vue 3 JSX 支持
• @vitejs/plugin-react: React 支持
• @vitejs/plugin-react-swc: React + SWC 支持
• @vitejs/plugin-legacy: 旧浏览器兼容

Vue 项目通常与 vue Skill 一起使用,组件库项目可再配合 antdv-next。

与 AGENTS.md / CLAUDE.md 的关系

Antfu README 强调 Skill 的价值在于可共享和按需加载。如果项目中总是需要遵守某些 Vite 约定,例如固定端口、代理规则、构建产物目录或插件顺序,应同时写入 AGENTS.md / CLAUDE.md,并要求 AI 在相关任务中使用 vite Skill。

示例:

# Vite 约定
- 修改 vite.config.ts 前先使用 vite skill
- 开发服务器端口固定为 5173
- API 代理统一配置在 server.proxy
- 构建前运行 pnpm build 验证

常见问题

什么时候触发 vite Skill?

只要任务涉及 vite.config.ts、Vite 插件、dev server、HMR、环境变量、构建、SSR、库模式或 Rolldown 迁移,都应触发。

Vite 8 / Rolldown 相关内容是否要默认迁移?

不要默认迁移。只有用户明确要求升级,或项目已经使用相应版本时,才按 Rolldown / Oxc 迁移参考检查配置兼容性。

VitePress 项目是否也适用?

适用。VitePress 基于 Vite,但 VitePress 自身配置还应配合 VitePress 文档或对应 Skill。当前项目是 VitePress 文档站,涉及站点配置时应优先看 .vitepress/config.mts,涉及底层构建能力时再使用 vite Skill。

参考链接

• Antfu Skills README: https://github.com/antfu/skills/blob/main/README.md
• Vite Skill: https://github.com/antfu/skills/tree/main/skills/vite
• Vite 官方文档: https://vite.dev