🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx @anthropic-ai/skills install antfu/skills/vite

💡 提示：需要 Node.js 和 NPM

Vite

基于 Vite 8 测试版（Rolldown 驱动）。Vite 8 使用 Rolldown 打包器和 Oxc 转换器。

Vite 是下一代前端构建工具，具有快速的开发服务器（原生 ESM + 热模块替换）和优化的生产构建。

偏好设置

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

核心

主题 描述 参考
配置 vite.config.ts、defineConfig、条件配置、loadEnv core-config
特性 import.meta.glob、资源查询（?raw、?url）、import.meta.env、热模块替换 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 单文件组件支持
  • @vitejs/plugin-vue-jsx – Vue 3 JSX
  • @vitejs/plugin-react – 使用 Oxc/Babel 的 React
  • @vitejs/plugin-react-swc – 使用 SWC 的 React
  • @vitejs/plugin-legacy – 旧版浏览器支持

📄 原始文档

完整文档（英文）：

https://skills.sh/antfu/skills/vite

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。