$ loading_
帮助开发者处理 Vite 配置、插件、构建优化与 SSR 等实战问题
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "vite-patterns" 技能： 1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/skills/vite-patterns/SKILL.md 2. 保存为 ~/.claude/skills/vite-patterns/SKILL.md 3. 装好后重载技能，告诉我可以用了
请检查这份 vite.config.ts，找出可能导致开发服务器启动失败或构建异常的配置问题，并给出修复建议与修改后的示例。
返回配置问题清单、原因分析，以及可直接使用的修正版配置示例。
帮我编写一个 Vite 插件：在构建时扫描指定目录中的 Markdown 文件，提取标题并生成一个 JSON 清单，同时说明插件钩子选择原因。
输出完整插件代码、关键钩子说明，以及接入项目的配置方式。
我的 Vite 项目首次启动很慢、生产构建体积也偏大。请根据项目依赖情况，给出 optimizeDeps、manualChunks、压缩与资源拆分的优化建议。
提供一套性能优化方案，包括配置建议、适用场景与预期收益。
Build tool and dev server patterns for Vite 8+ projects. Covers configuration, environment variables, proxy setup, library mode, dependency pre-bundling, and common production pitfalls.
vite.config.ts or vite.config.js.env filesbuild.libnode_modules/.vite, so subsequent starts skip the work.VITE_-prefixed vars become public constants in the bundle; everything unprefixed is invisible to client code.// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
resolve: {
alias: { '@': new URL('./src', import.meta.url).pathname },
},
})
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd()) // VITE_ prefixed only (safe)
return {
plugins: [react()],
server: command === 'serve' ? { port: 3000 } : undefined,
define: {
__API_URL__: JSON.stringify(env.VITE_API_URL),
},
}
})
| Key | Default | Description |
|---|---|---|
root | '.' | Project root (where index.html lives) |
base | '/' | Public base path for deployed assets |
envPrefix | 'VITE_' | Prefix for client-exposed env vars |
build.outDir | 'dist' | Output directory |
build.minify | 'oxc' | Minifier ('oxc', 'terser', or false) |
build.sourcemap | false | true, 'inline', or 'hidden' |
Most plugin needs are covered by a handful of well-maintained packages. Reach for these before writing your own.
| Plugin | Purpose | When to use |
|---|---|---|
@vitejs/plugin-react-swc | React HMR + Fast Refresh via SWC | Default for React apps (faster than Babel variant) |
@vitejs/plugin-react | React HMR + Fast Refresh via Babel | Only if you need Babel plugins (emotion, MobX decorators) |
@vitejs/plugin-vue | Vue 3 SFC support | Vue apps |
vite-plugin-checker | Runs tsc + ESLint in worker thread with HMR overlay | Any TypeScript app — Vite does NOT type-check during vite build |
vite-tsconfig-paths | Honors tsconfig.json paths aliases | Any time you already have aliases in tsconfig.json |
vite-plugin-dts | Emits .d.ts files in library mode | Publishing TypeScript libraries |
vite-plugin-svgr | Imports SVGs as React components | React apps using SVGs as components |
rollup-plugin-visualizer | Bundle treemap/sunburst report | Periodic bundle size audits (use enforce: 'post') |
vite-plugin-pwa | Zero-config PWA + Workbox | Offline-capable apps |
…
为 Quarkus 项目执行发布前验证闭环，涵盖构建、测试、扫描与差异审查。
帮助你梳理 React 与 Next.js 前端模式、状态管理及性能优化最佳实践