📖 Guide
Vite — Complete Reference
Next-generation frontend build tool — CLI commands, plugins, CSS handling, environment variables, build optimization, and library mode.
66 commands across 9 categories
CLI CommandsConfigurationPluginsCSS & AssetsEnvironment VariablesBuildServer OptionsLibrary ModeCommon Patterns
CLI Commands
| Command | Description |
|---|---|
npm create vite@latest | Scaffold a new Vite project |
npm create vite@latest my-app -- --template react-ts | Create project with specific template |
npx vite | Start development server |
npx vite build | Build for production |
npx vite preview | Preview production build locally |
npx vite optimize | Pre-bundle dependencies manually |
npx vite --host 0.0.0.0 --port 3000 | Start dev server on custom host and port |
Configuration
| Command | Description |
|---|---|
export default defineConfig({ ... }) | Basic vite.config.ts using defineConfig helper |
export default defineConfig(({ mode }) => ({ ... })) | Conditional config based on mode |
root: './src' | Set the project root directory |
base: '/my-app/' | Set public base path (for subdirectory deploys) |
publicDir: 'static' | Directory for static assets (default: public) |
envDir: './env' | Directory to load .env files from |
logLevel: 'info' | Set log level (info, warn, error, silent) |
Plugins
| Command | Description |
|---|---|
import react from '@vitejs/plugin-react' | Official React plugin (Babel-based) |
import react from '@vitejs/plugin-react-swc' | React plugin using SWC (faster builds) |
import vue from '@vitejs/plugin-vue' | Official Vue 3 plugin |
import legacy from '@vitejs/plugin-legacy' | Generate legacy browser bundles |
plugins: [react(), legacy({ targets: ['defaults'] })] | Use multiple plugins in config |
import { visualizer } from 'rollup-plugin-visualizer' | Bundle size visualization (Rollup plugin) |
CSS & Assets
| Command | Description |
|---|---|
import styles from './app.module.css' | Import CSS modules (*.module.css) |
import './style.scss' | Import Sass/SCSS (install sass package) |
css: { modules: { localsConvention: 'camelCase' } } | Use camelCase for CSS module class names |
css: { preprocessorOptions: { scss: { additionalData: '@use "vars";' } } } | Inject global SCSS imports |
import imageUrl from './image.png' | Import image as resolved URL |
import raw from './shader.glsl?raw' | Import file as raw string |
import worker from './worker.js?worker' | Import as web worker |
css: { devSourcemap: true } | Enable CSS source maps in development |
Environment Variables
| Command | Description |
|---|---|
VITE_API_URL=https://api.example.com | Define env var in .env (must start with VITE_) |
import.meta.env.VITE_API_URL | Access env variable in client code |
import.meta.env.MODE | Current mode (development/production) |
import.meta.env.DEV | Boolean: true in development |
import.meta.env.PROD | Boolean: true in production |
import.meta.env.BASE_URL | The base URL the app is served from |
.env.local | Local overrides (gitignored by default) |
.env.production | Loaded only in production mode |
Build
| Command | Description |
|---|---|
build: { outDir: 'dist' } | Output directory for production build |
build: { sourcemap: true } | Generate source maps for production |
build: { minify: 'terser' } | Use Terser for minification (default: esbuild) |
build: { target: 'es2020' } | Set browser target for transpilation |
build: { rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'] } } } } | Manual chunk splitting |
build: { assetsInlineLimit: 4096 } | Inline assets smaller than 4KB as base64 |
build: { cssCodeSplit: true } | Enable per-chunk CSS code splitting |
build: { emptyOutDir: true } | Clean output directory before building |
Server Options
| Command | Description |
|---|---|
server: { port: 3000 } | Set dev server port |
server: { host: true } | Expose to network (listen on 0.0.0.0) |
server: { open: true } | Open browser on server start |
server: { proxy: { '/api': 'http://localhost:5000' } } | Proxy API requests to backend |
server: { proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true, rewrite: (p) => p.replace(/^\/api/, '') } } } | Proxy with path rewriting |
server: { https: true } | Enable HTTPS (auto-generates cert) |
server: { cors: true } | Enable CORS for dev server |
server: { hmr: { overlay: false } } | Disable error overlay |
Library Mode
| Command | Description |
|---|---|
build: { lib: { entry: 'src/index.ts', name: 'MyLib' } } | Build as a library |
build: { lib: { formats: ['es', 'umd'] } } | Output ES module and UMD formats |
build: { lib: { fileName: (format) => 'my-lib.' + format + '.js' } } | Custom output file names |
build: { rollupOptions: { external: ['react', 'react-dom'] } } | Externalize peer dependencies |
build: { rollupOptions: { output: { globals: { react: 'React' } } } } | Map externals to globals for UMD |
resolve: { dedupe: ['react', 'react-dom'] } | Deduplicate shared dependencies |
Common Patterns
| Command | Description |
|---|---|
resolve: { alias: { '@': '/src' } } | Create @ import alias for src directory |
define: { __APP_VERSION__: JSON.stringify('1.0.0') } | Define global compile-time constants |
optimizeDeps: { include: ['linked-dep'] } | Force pre-bundling of a dependency |
optimizeDeps: { exclude: ['large-lib'] } | Exclude a dependency from pre-bundling |
ssr: { noExternal: ['my-component-lib'] } | Bundle dependency in SSR mode |
esbuild: { drop: ['console', 'debugger'] } | Remove console and debugger statements in production |
appType: 'mpa' | Multi-page app mode (no SPA fallback) |
assetsInclude: ['**/*.gltf'] | Treat additional file types as static assets |
📖 Free, searchable command reference. Bookmark this page for quick access.