Vite Cheatsheet - Vite Build Tool Command Reference

Vite trades dev-server startup for a near-instant experience via native ESM and on-demand compilation, and its config reads differently from Webpack. This reference covers scaffolding, the dev server, production build, environment variables, plugins, proxy and SSR builds, and calls out where it diverges from legacy bundling. Use it when starting a project, migrating an older Webpack setup, or when a config you set "just doesn't apply". After reading you can take a project from scaffolding to a production build, and know exactly where to edit for dev vs build.

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

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

import.meta.env.VITE_API_URL

Client env vars, must have VITE_ prefix

import.meta.env.MODE

Current mode: development / production

import.meta.env.DEV

Boolean, whether in dev mode

import.meta.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

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

Figma Help

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.