Vite 命令速查表 - Vite 构建工具常用命令大全
Vite 新一代前端构建工具的必备命令都在这里了，从项目创建到生产构建，按场景分类整理，直接复制使用。
返回 开发工具项目创建与初始化 5
npm create vite@latest创建新项目，交互式选择模板
npm create vite@latest my-app -- --template react-ts指定模板：react-ts / vue-ts / svelte-ts 等
npm create vite@latest my-app -- --template vanilla-ts纯 TypeScript 模板，无框架绑定
npm install安装项目依赖
npm run dev启动开发服务器（默认端口 5173）
开发服务器 7
vite启动开发服务器，默认端口 5173
vite --port 3000指定端口号启动
vite --host 0.0.0.0监听所有网络接口，局域网访问
vite --open自动在浏览器中打开
vite --cors启用 CORS 头
vite --strictPort端口被占用时报错而非自动递增
vite --force强制重新构建依赖预打包
构建打包 7
vite build生产构建，输出到 dist 目录
vite build --outDir dist指定输出目录（默认 dist）
vite build --watch监听模式，文件变化自动重新构建
vite build --sourcemap生成 source map 文件，方便调试
vite build --minify esbuild使用 esbuild 压缩（默认 terser 可选）
vite preview预览构建结果，模拟生产环境
vite build --report生成构建分析报告（需插件）
配置选项 7
import { defineConfig } from 'vite'使用 defineConfig 获得类型提示和自动补全
root: './src'项目根目录，默认当前目录
base: '/my-app/'公共基础路径，部署到子路径时设置
build.outDir: 'dist'构建输出目录
build.assetsDir: 'assets'静态资源子目录
build.target: 'es2020'构建目标浏览器版本
build.emptyOutDir: true构建前清空输出目录
环境变量与模式 6
globalThis._importMeta_.env.VITE_API_URL客户端环境变量，必须 VITE_ 前缀
globalThis._importMeta_.env.MODE当前模式：development / production
globalThis._importMeta_.env.DEV布尔值，是否开发模式
globalThis._importMeta_.env.PROD布尔值，是否生产模式
vite build --mode staging指定模式构建，加载 .env.staging
loadEnv(mode, process.cwd(), '')在 vite.config.ts 中加载环境变量
插件与集成 6
import vue from '@vitejs/plugin-vue'Vue 3 单文件组件支持插件
import react from '@vitejs/plugin-react'React Fast Refresh 支持插件
import { visualizer } from 'rollup-plugin-visualizer'打包体积可视化分析
vite-plugin-pwaPWA 渐进式 Web 应用支持
vite-plugin-checkerTypeScript / ESLint 类型检查，异步不阻塞构建
vite-plugin-inspect检查 Vite 插件中间状态，调试插件用
SSR 与库模式 6
build.ssr: true启用 SSR 服务端渲染构建
build.ssrManifest: true生成 SSR 构建清单，配合预加载
build.lib: { entry: 'src/index.ts', name: 'MyLib' }库模式，打包为可发布的库
build.lib.formats: ['es', 'cjs', 'umd']库输出格式：ESM / CommonJS / UMD
ssr.external: ['vue']SSR 中外部化依赖，不打包进产物
ssr.noExternal: ['my-lib']SSR 中强制打包某些依赖
💡 提示
- Vite 开发服务器使用原生 ESM，无需打包，冷启动极快
- 使用 vite.config.ts 配置文件，支持 TypeScript
- 环境变量以 VITE_ 前缀暴露到客户端
- 使用 defineConfig 获得类型提示和自动补全
- Vite 支持对 Vue/React/Svelte/Lit 等框架的一流支持