全部速查表前端开发

vite

Vite 5+

Vite CLI 命令快速参考:dev server、build、preview、依赖预打包、插件管理、环境变量,以及项目检查——并附带常用参数和实操示例。

30 条命令

开发服务器

vite

使用项目根目录下的 `vite.config.*` 启动 dev server。默认绑定 `http://localhost:5173`;自动检测框架 preset。

--port <N>;--host <0.0.0.0|...> 在网络上暴露;--open 自动打开浏览器;--strict 强制使用指定端口;--force 重新预打包依赖

vite --port 4000 --host
vite --port <N>

将 dev server 绑定到指定端口(若端口已被占用且未同时传 `--strict`,则使用下一个空闲端口)。

vite --port 4000 --strict
vite --host

在所有网络接口上暴露 dev server(默认是 `localhost`)。配合 `--port` 可以得到稳定的局域网 URL。

vite --host 0.0.0.0 --port 5173
vite --open

dev server 准备就绪后用默认浏览器打开其 URL。

--open /path/to/route 打开到指定路由

vite --open /admin
vite --force

强制在下次请求时重新运行依赖预打包(esbuild)。添加新依赖或 `.vite` 缓存损坏后使用。

vite --force

构建

vite build

生成生产包到默认的 `dist/` 目录。使用 Rollup,支持代码分割、tree-shaking、CSS 抽取、source map 以及资源哈希命名。

--mode development|production;--target es2020|...;--sourcemap;--minify esbuild|terser;--outDir dist

vite build
vite build --watch

监视源文件变更并重新生成的生产构建。很少用到;主要用于把 Vite 嵌入到其他构建流水线中。

vite build --watch
vite build --mode <name>

选择 mode,作用于 `globalThis._importMeta_.env.MODE` 与 `.env.<mode>` 覆盖文件(`.env.development`、`.env.staging`)。

vite build --mode staging && vite build --mode production
vite build --sourcemap

生成外部 `.map` 文件(生产环境默认隐藏)。配合 Sentry / LogRocket 部署以便获取堆栈。

vite build --sourcemap

预览

vite preview

通过本地静态服务器提供刚构建好的 `dist/`,方便在部署前对生产包做最终确认。

--port <N>;--host;--strict;--outDir dist

vite preview --port 4173 --strict

优化依赖

vite optimizeDeps

手动触发依赖预打包,而无需启动 dev server。在 CI 中用于预热 `node_modules/.vite/deps`。

--force;--config <file>

vite optimizeDeps --force
vite optimizeDeps include <pkg>

强制预打包一个未被自动检测到的 CommonJS 依赖。更推荐在 `vite.config.ts` 的 `optimizeDeps.include` 中配置,而非通过 CLI。

vite optimizeDeps

诊断

vite --version

打印 Vite 版本。

vite --version
vite info

打印环境信息(Node 版本、操作系统、包管理器、Vite 版本、关键插件版本)——提 bug 时粘贴这段很有用。

vite info
vite --debug

启用详细内部日志。排查插件 / HMR 问题时可重定向到文件。

vite --debug > vite-debug.log 2>&1

配置

vite --config <file>

让 Vite 使用自定义配置文件(CI 中常用 `vite.config.ci.ts` 配合额外插件)。

vite --config vite.config.ci.ts build
vite --configLoader <runner>

Vite 6+——选择配置加载方式(`bundle` 是 Vite 6 的默认值;`runner` / `native` / `transform` 是非 Node 环境的备选)。

vite --configLoader runner build

插件 CLI

vite plugin <name>

由某些 Vite 插件注册的桩命令(例如 `vite-plugin-pwa` 的 `vite pwa-asset-generate`)。直接透传。

vite pwa-asset-generate

自定义

vite --base <path>

设置生产资产的公共路径(默认 `/`)。当服务位于反代之后的子路径时,可设为 `/my-site/`。

vite build --base /gurutoolkit/
vite --logLevel <level>

控制 Vite 日志量:`info`(默认)/ `warn` / `error` / `silent`。

vite build --logLevel warn
vite --clearScreen false

不要在每次 reload 之间清屏——当 Vite 输出需要重定向到其他工具(tmux / 日志)时很有用。

vite --clearScreen false | tee vite.log

构建目标

vite build --target <browserslist>

告诉 Rollup 最低兼容的浏览器目标。语法降级按 esbuild 配置进行;旧版目标会生成更大的包。

vite build --target es2020,edge88,firefox78,chrome87,safari14
vite build --cssCodeSplit

把 CSS 按路由拆分为单独 chunk(Vite 4 起默认 true)。传 `--cssCodeSplit=false` 把所有 CSS 内联到单文件。

vite build --cssCodeSplit=false
vite build --minify <esbuild|terser>

选择压缩器。esbuild 是快速的默认;`terser` 在旧浏览器下产物略小。

vite build --minify terser

缓存

vite --force

删除 `node_modules/.vite/deps` 并重新打包——解决依赖大版本升级后预打包缓存过期的问题。

rm -rf node_modules/.vite && vite --force
rm -rf node_modules/.vite

手动清空 Vite 缓存。下次启动 dev server 时效果与 `vite --force` 相同。

rm -rf node_modules/.vite && vite

杂项

vite --help

列出每个 CLI 参数及一行说明。

vite --help
vite create <name>

搭建一个 Vite 项目(旧版 `create-vite` 二进制)。现代用法是 `npm create vite@latest`(通过 `npx` 路由)。

--template vue | react | svelte | lit | vanilla 等

npm create vite@latest my-app -- --template vue-ts
npx vite-node <script.ts>

在与 Vite 用于 SSR 时相同的环境中运行 TypeScript 脚本——完整的模块解析、别名、环境变量支持。

--options.transformMode ssr | web

npx vite-node scripts/seed.ts
vite --cjs

强制 Vite 以 CommonJS 形式加载配置(用于遗留项目)。仅在从 CJS 栈迁移时使用。

vite --cjs build

相关命令速查

关于 Vite

Vite(法语 "fast")是下一代的 frontend 构建工具,由 Vue.js 作者尤雨溪创建并由 Vite 团队维护,1.0 版本于 2021 年 4 月发布,当前稳定版本线为 Vite 5 / 6。Vite 在开发时通过原生 ESM 提供源码——esbuild 预打包依赖,基于 Rollup 的 HMR 在毫秒级处理源码更新——然后用 Rollup 进行生产打包。相比 webpack,Vite 在开发阶段跳过打包步骤,即使在大型项目上冷启动时间也能从数秒降到 300 毫秒以内。Vite 与框架无关:官方模板覆盖 Vue、React、Svelte、Preact、Lit、Solid、Qwik 与 vanilla TS;社区插件则覆盖 Astro、Nuxt、SvelteKit、Remix 等。配置位于 `vite.config.ts`(或 `.js`/`.mjs`),使用 Rollup 兼容的插件 API 以及一组精选的 Vite 专属 hook。Vite 不会上传你的代码到任何地方——所有 dev/build 都本地运行。生产包产物为静态资源,可部署到任何地方(Vercel、Netlify、nginx、S3)。

速查页版本 1.0.0