Vite Cheat Sheet
Quick reference for Vite build tool. Commands, config options, plugins, environment variables, and optimization tips — all in one page.
CLI Commands
| npm create vite@latest my-app | Scaffold a new Vite project |
| npm create vite@latest my-app -- --template react-ts | Scaffold with React + TypeScript |
| vite | Start development server |
| vite build | Build for production |
| vite preview | Preview production build locally |
| vite --host 0.0.0.0 | Expose dev server on network |
| vite --port 8080 | Start dev server on custom port |
| vite optimize | Pre-bundle dependencies manually |
Config Options
| export default defineConfig({ ... }) | Config file (vite.config.ts) |
| root: "./src" | Project root directory |
| base: "/my-app/" | Public base path for deployment |
| server: { port: 3000, open: true } | Dev server port and auto-open |
| server: { proxy: { "/api": "http://localhost:8080" } } | Proxy API requests |
| resolve: { alias: { "@": "/src" } } | Import path aliases |
| css: { modules: { localsConvention: "camelCase" } } | CSS modules config |
| build: { outDir: "dist", sourcemap: true } | Build output directory and source maps |
Plugins
| import react from "@vitejs/plugin-react" | React Fast Refresh + JSX |
| import vue from "@vitejs/plugin-vue" | Vue 3 SFC support |
| import legacy from "@vitejs/plugin-legacy" | Legacy browser support via polyfills |
| import { svelte } from "@sveltejs/vite-plugin-svelte" | Svelte support |
| plugins: [react(), legacy({ targets: ["defaults"] })] | Register plugins in config |
| import { visualizer } from "rollup-plugin-visualizer" | Bundle size analysis |
Environment Variables
| .env | Loaded in all cases |
| .env.local | Loaded in all cases, git-ignored |
| .env.development | Loaded in dev mode only |
| .env.production | Loaded in production build only |
| VITE_API_URL=https://api.example.com | Prefix with VITE_ to expose to client |
| import.meta.env.VITE_API_URL | Access env var in code |
| import.meta.env.MODE | Current mode (development/production) |
| import.meta.env.DEV | Boolean: true in dev mode |
Build Optimization
| build: { target: "es2020" } | Set browser target for output |
| build: { minify: "terser" } | Use Terser for minification (default: esbuild) |
| build: { cssCodeSplit: true } | Split CSS per async chunk |
| build: { rollupOptions: { output: { manualChunks: { ... } } } } | Manual chunk splitting |
| build: { assetsInlineLimit: 4096 } | Inline assets smaller than 4KB as base64 |
| optimizeDeps: { include: ["lodash-es"] } | Force pre-bundle a dependency |
Step-by-Step Guide
Read Guide →