全部速查表前端開發

vite

Vite 5+

Vite CLI 命令快速參考:開發伺服器、build、preview、相依預先打包、plugin 管理、環境變數與專案檢視——附常用參數與實作範例。

30 條命令

開發伺服器

vite

使用專案根目錄的 `vite.config.*` 啟動開發伺服器。預設綁定 `http://localhost:5173`;自動偵測框架預設。

--port <N>;--host <0.0.0.0|...> 對外開放;--open 開啟瀏覽器;--strict 強制使用指定埠;--force 重新預先打包依賴

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

把開發伺服器綁定到特定埠(若被佔用會使用下一個可用埠,除非同時加上 `--strict`)。

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

把開發伺服器開放到所有網路介面(預設為 `localhost`)。搭配 `--port` 以取得穩定的 LAN URL。

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

開發伺服器就緒後,開啟預設瀏覽器到該 URL。

--open /path/to/route 開啟到指定路由

vite --open /admin
vite --force

強制在下次請求時重新執行相依預先打包(esbuild)。當新增依賴或 `.vite` 快取損毀時使用。

vite --force

建置

vite build

產生正式 bundle 至預設的 `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>

選擇驅動 `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/`,方便在部署前快速確認正式 bundle。

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

vite preview --port 4173 --strict

優化依賴

vite optimizeDeps

手動觸發相依預先打包而不啟動開發伺服器。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 版本、OS、套件管理程式、Vite 版本、關鍵 plugin 版本)——貼進 bug 報告中。

vite info
vite --debug

啟用詳細的內部日誌。排查 plugin/HMR 問題時可導入檔案。

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

設定

vite --config <file>

讓 Vite 指向自訂設定檔(CI 經常使用 `vite.config.ci.ts` 加上額外 plugin)。

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

Vite 6+——選擇如何載入設定(`bundle` 是 Vite 6 之後的預設;`runner`/`native`/`transform` 為非 Node 環境的替代選項)。

vite --configLoader runner build

Plugin CLI

vite plugin <name>

由某些 Vite plugin 註冊的佔位指令(例如 `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

不要在重新載入時清除終端機——把 Vite 輸出導入其他工具(tmux/logs)時很有用。

vite --clearScreen false | tee vite.log

建置目標

vite build --target <browserslist>

告訴 Rollup 最低瀏覽器目標。Vite 會依 esbuild 設定處理語法降階;舊版目標會產生較大的 bundle。

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

把 CSS 依路由輸出為獨立 chunk(Vite 4 起預設為 true)。加上 `--cssCodeSplit=false` 可將全部內聯為單一檔案。

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 啟動時等同 `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-only 環境遷移時使用。

vite --cjs build

相關命令速查

關於 Vite

Vite(法語意為「快速」)是由 Vue.js 作者 Evan You 開發、Vite 團隊維護的下一代前端建置工具,於 2021 年 4 月發佈 1.0,目前穩定版線為 Vite 5/6。Vite 在開發階段透過原生 ESM 提供源碼——由 esbuild 預先打包相依、以 Rollup 為基礎的 HMR 處理源碼更新——再於正式環境用 Rollup 打包。相比 webpack,Vite 在開發時跳過打包步驟,冷啟動時間從數秒降到 300 毫秒以下,即使大型專案也一樣。Vite 不限框架:官方模板涵蓋 Vue、React、Svelte、Preact、Lit、Solid、Qwik 與 vanilla TS;社群 plugin 涵蓋 Astro、Nuxt、SvelteKit、Remix 等。設定位於 `vite.config.ts`(或 `.js`/`.mjs`),使用 Rollup 相容的 plugin API 加上一組精選的 Vite 專屬 hooks。Vite 不會上傳你的程式碼——所有 dev/build 都在本地執行。正式環境 bundle 以靜態資源形式發佈,可部署到任何地方(Vercel、Netlify、nginx、S3)。

速查頁版本 1.0.0