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 --hostvite --port <N>把開發伺服器綁定到特定埠(若被佔用會使用下一個可用埠,除非同時加上 `--strict`)。
vite --port 4000 --strictvite --host把開發伺服器開放到所有網路介面(預設為 `localhost`)。搭配 `--port` 以取得穩定的 LAN URL。
vite --host 0.0.0.0 --port 5173vite --open開發伺服器就緒後,開啟預設瀏覽器到該 URL。
--open /path/to/route 開啟到指定路由
vite --open /adminvite --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 buildvite build --watch正式建置在被監控的源檔變更時重新執行。較少用到;主要用於把 Vite 嵌入其他建置流程。
vite build --watchvite build --mode <name>選擇驅動 `globalThis._importMeta_.env.MODE` 與 `.env.<mode>` 覆寫(`.env.development`、`.env.staging`)的模式。
vite build --mode staging && vite build --mode productionvite 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 --forcevite optimizeDeps include <pkg>強制預先打包未被自動偵測到的 CommonJS 依賴。建議改在 `vite.config.ts` 的 `optimizeDeps.include` 中設定,而非用 CLI。
vite optimizeDeps診斷
vite --version印出 Vite 版本。
vite --versionvite info印出環境詳細資訊(Node 版本、OS、套件管理程式、Vite 版本、關鍵 plugin 版本)——貼進 bug 報告中。
vite infovite --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 buildvite --configLoader <runner>Vite 6+——選擇如何載入設定(`bundle` 是 Vite 6 之後的預設;`runner`/`native`/`transform` 為非 Node 環境的替代選項)。
vite --configLoader runner buildPlugin 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 warnvite --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,safari14vite build --cssCodeSplit把 CSS 依路由輸出為獨立 chunk(Vite 4 起預設為 true)。加上 `--cssCodeSplit=false` 可將全部內聯為單一檔案。
vite build --cssCodeSplit=falsevite build --minify <esbuild|terser>選擇壓縮器。esbuild 是快速的預設;`terser` 為舊版瀏覽器產出稍小的輸出。
vite build --minify terser快取
vite --force刪除 `node_modules/.vite/deps` 並重新打包——解決大幅升級後過期的預先打包依賴。
rm -rf node_modules/.vite && vite --forcerm -rf node_modules/.vite手動清除 Vite 快取。下次 dev 啟動時等同 `vite --force`。
rm -rf node_modules/.vite && vite雜項
vite --help列出所有 CLI 旗標與簡短說明。
vite --helpvite create <name>搭建 Vite 專案(舊的 `create-vite` 執行檔)。現代用法是 `npm create vite@latest`(透過 `npx` 執行)。
--template vue | react | svelte | lit | vanilla 等
npm create vite@latest my-app -- --template vue-tsnpx vite-node <script.ts>在 Vite 用於 SSR 的同一環境中執行 TypeScript 指令稿——完整的模組解析、別名與環境變數。
--options.transformMode ssr | web
npx vite-node scripts/seed.tsvite --cjs強制 Vite 把設定當作 CommonJS 載入(舊專案)。只在從 CJS-only 環境遷移時使用。
vite --cjs build相關命令速查
volta
日常 Volta CLI 命令快速參考:安裝 Node/npm/Yarn/pnpm 工具鏈、為個別專案鎖定版本、管理全域套件、疑難排解 Volta 本身——附常用參數與實作範例。
25 條命令
Volta 1.x
npm
日常 npm CLI 命令快速參考:init/install/add/remove/update/scripts/run/publish/audit,加上 lockfile、registry、cache 管理——附常用參數與實作範例。
34 條命令
npm 10+
yarn
日常 Yarn CLI 命令快速參考(涵蓋 Yarn Classic 1.x 與 Yarn Berry 2/3/4):install/add/remove/run/workspaces、lockfile、Plug'n'Play,以及 Berry 設定——附常用參數與實作範例。
33 條命令
Yarn 1.x (classic) / Yarn 4 (berry)
pnpm
pnpm 快速參考:install / add / remove / update、scripts、workspaces、store 與 cache、config——聚焦於 GitHub 站 pnpm 倉庫的工作流,附參數與實作範例。
31 條命令
pnpm 9+
npx
npx 命令快速參考:執行一次性套件執行檔、搭建專案、管理 npx 快取、鎖定版本,以及避免互動式 CLI 的陷阱——附常用參數與實作範例。
25 條命令
npx 10+ (shipped with npm)
商標與使用聲明
本批命令列工具速查手冊為開源社群參考資料。文中涉及的各工具的名稱、標識、商標(如 Git™、Docker™、Kubernetes®、kubectl、PostgreSQL®、MySQL®、Redis™、MongoDB®、Linux™、PowerShell™、Vim™ 等)均歸對應權利人所有,此處僅為識別與參考之目的使用。
本速查手冊的全部內容均為獨立編寫的簡化自包含參考,**與任何官方文件不存在隸屬、被認可或引用關係**。命令列表、參數說明、範例均為作者原創簡化表達;如需權威資訊,請參閱各工具的官方文件。
命令語法與參數可能在不同工具版本中有所差異。所示版本標籤對應穩定發佈版本;其他版本行為可能有所不同。本速查手冊**不代表**商標權利人的任何偏好或推薦。
如商標或版權方認為本站部分內容存在權益侵害,請發送電郵至[email protected],我們在收到有效權屬證明後,會在合理期限內修改或移除相關內容。
本網站不對因使用本站資訊而產生的任何直接或間接損失承擔法律責任。
關於 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