Vite Cheatsheet - Vite Build Tool Command Reference

Essential Vite build tool commands for the complete workflow from project creation to production build. Copy directly for your projects.

Dev Tools·44 commands·Last updated 2026-07-21

Back to Dev Tools

Project Creation & Init 5

npm create vite@latest⧉

Create new project, interactive template selection

npm create vite@latest my-app -- --template react-ts⧉

Specify template: react-ts / vue-ts / svelte-ts

npm create vite@latest my-app -- --template vanilla-ts⧉

Plain TypeScript template, no framework

npm install⧉

Install project dependencies

npm run dev⧉

Start dev server (default port 5173)

Dev Server 7

vite⧉

Start dev server, default port 5173

vite --port 3000⧉

Specify port number

vite --host 0.0.0.0⧉

Listen on all network interfaces, LAN access

vite --open⧉

Auto open browser on start

vite --cors⧉

Enable CORS headers

vite --strictPort⧉

Exit if port is taken instead of auto-increment

vite --force⧉

Force re-run dependency pre-bundling

Production Build 7

vite build⧉

Production build, outputs to dist

vite build --outDir dist⧉

Specify output directory (default dist)

vite build --watch⧉

Watch mode, rebuild on file changes

vite build --sourcemap⧉

Generate source maps for debugging

vite build --minify esbuild⧉

Use esbuild for minification (default terser)

vite preview⧉

Preview build output, simulates production

vite build --report⧉

Generate build report (requires plugin)

Configuration 7

import { defineConfig } from 'vite'⧉

Use defineConfig for type hints and autocomplete

root: './src'⧉

Project root directory, defaults to current dir

base: '/my-app/'⧉

Public base path, set when deploying to sub-path

build.outDir: 'dist'⧉

Build output directory

build.assetsDir: 'assets'⧉

Static assets subdirectory

build.target: 'es2020'⧉

Build target browser version

build.emptyOutDir: true⧉

Empty output directory before build

Env Variables & Modes 6

globalThis._importMeta_.env.VITE_API_URL⧉

Client env vars, must have VITE_ prefix

globalThis._importMeta_.env.MODE⧉

Current mode: development / production

globalThis._importMeta_.env.DEV⧉

Boolean, whether in dev mode

globalThis._importMeta_.env.PROD⧉

Boolean, whether in production mode

vite build --mode staging⧉

Build with specified mode, loads .env.staging

loadEnv(mode, process.cwd(), '')⧉

Load env vars in vite.config.ts

Plugins & Integration 6

import vue from '@vitejs/plugin-vue'⧉

Vue 3 SFC support plugin

import react from '@vitejs/plugin-react'⧉

React Fast Refresh support plugin

import { visualizer } from 'rollup-plugin-visualizer'⧉

Bundle size visualization

vite-plugin-pwa⧉

PWA progressive web app support

vite-plugin-checker⧉

TypeScript/ESLint type checking, async non-blocking

vite-plugin-inspect⧉

Inspect Vite plugin intermediate state, debug plugins

SSR & Library Mode 6

build.ssr: true⧉

Enable SSR server-side rendering build

build.ssrManifest: true⧉

Generate SSR manifest for preload hints

build.lib: { entry: 'src/index.ts', name: 'MyLib' }⧉

Library mode, package as publishable library

build.lib.formats: ['es', 'cjs', 'umd']⧉

Library output formats: ESM / CommonJS / UMD

ssr.external: ['vue']⧉

Externalize dependencies in SSR, not bundled

ssr.noExternal: ['my-lib']⧉

Force bundle certain dependencies in SSR

💡 Tips

Vite dev server uses native ESM, no bundling needed for instant cold start
Use vite.config.ts for configuration with full TypeScript support
Environment variables with VITE_ prefix are exposed to client code
Use defineConfig utility for type hints and autocomplete
Vite has first-class support for Vue, React, Svelte, Lit frameworks