入門指南

概覽

Vite（法語意為“快速”，發音為 /viːt/，類似“veet”）是一種構建工具，旨在為現代 Web 專案提供更快、更精簡的開發體驗。它主要由兩部分組成：

• 一個開發伺服器，它基於 原生 ES 模組 提供了 豐富的特性增強，例如極速的 模組熱更新 (HMR)。

• 一套構建指令，使用 Rolldown 打包你的程式碼，並預先配置好，以便輸出高度最佳化的生產環境靜態資源。

Vite 堅持“開箱即用”的理念，並提供合理的預設配置。閱讀 特性指南 以瞭解其能力。透過 外掛，可以實現對各種框架的支援或與其他工具的整合。配置章節 則解釋瞭如何在必要時針對你的專案調整 Vite。

Vite 還透過其 外掛 API 和 JavaScript API 提供了高度的可擴充套件性，並擁有完整的型別支援。

你可以在 為什麼選 Vite 章節中瞭解該專案背後的核心理念。

透過 Scrimba 的互動式教程學習 Vite

瀏覽器支援

在開發過程中，Vite 假設你使用現代瀏覽器。這意味著瀏覽器支援大部分最新的 JavaScript 和 CSS 特性。因此，Vite 將 esnext 設定為轉譯目標。這防止了語法降級，讓 Vite 能夠儘可能地以接近原始碼的方式提供模組。Vite 會注入一些執行時程式碼以使開發伺服器正常工作。這些程式碼使用了在每個大版本釋出時（針對此大版本為 2026-01-01）在 Baseline 中“新可用 (Newly Available)”的特性。

對於生產構建，Vite 預設的目標是 Baseline 中“廣泛可用 (Widely Available)”的瀏覽器。這些瀏覽器是指至少 2.5 年前釋出的版本。該目標可以透過配置進行降低。此外，可以透過官方的 @vitejs/plugin-legacy 外掛支援舊版瀏覽器。更多詳情請參見 構建生產版本 章節。

線上嘗試 Vite

你可以在 StackBlitz 上線上嘗試 Vite。它直接在瀏覽器中執行基於 Vite 的構建設定，因此與本地環境幾乎相同，且無需在機器上安裝任何東西。你可以訪問 vite.new/{template} 來選擇要使用的框架。

支援的模板預設包括：

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

搭建你的第一個 Vite 專案

npm

$ npm create vite@latest

Yarn

$ yarn create vite

pnpm

$ pnpm create vite

Bun

$ bun create vite

Deno

$ deno init --npm vite

然後按照提示操作即可！

觀看 Scrimba 上的互動式課程

相容性注意

Vite 需要 Node.js 20.19+ 或 22.12+ 版本。不過，有些模板可能需要更高版本的 Node.js 才能執行，如果你的包管理器對此發出警告，請升級你的 Node.js 版本。

使用 create-vite 的命令列選項

你還可以透過額外的命令列選項直接指定專案名稱和要使用的模板。例如，要搭建一個 Vite + Vue 專案，執行：

npm

# npm 7+, extra double-dash is needed:
$ npm create vite@latest my-vue-app -- --template vue

Yarn

$ yarn create vite my-vue-app --template vue

pnpm

$ pnpm create vite my-vue-app --template vue

Bun

$ bun create vite my-vue-app --template vue

Deno

$ deno init --npm vite my-vue-app --template vue

有關每個支援模板的詳細資訊，請參閱 create-vite：vanilla、vanilla-ts、vue、vue-ts、react、react-ts、react-swc、react-swc-ts、preact、preact-ts、lit、lit-ts、svelte、svelte-ts、solid、solid-ts、qwik、qwik-ts。

你可以使用 . 作為專案名稱，在當前目錄下進行搭建。

若要建立一個無需互動式提示的專案，可以使用 --no-interactive 標誌。

社群模板

create-vite 是一個用於從主流框架的基礎模板快速啟動專案的工具。請檢視 Awesome Vite 以獲取更多 社群維護的模板，其中包含了其他工具或針對不同框架的配置。

對於位於 https://github.com/user/project 的模板，你可以透過在專案 URL 的 github 後面新增 .stackblitz（即 https://github.stackblitz.com/user/project）線上進行嘗試。

你也可以使用像 tiged 這樣的工具來利用其中一個模板搭建專案。假設專案託管在 GitHub 上且使用 main 作為預設分支，你可以透過以下方式建立本地副本：

npx tiged user/project my-project
cd my-project

npm install
npm run dev

手動安裝

在你的專案中，你可以透過以下命令安裝 vite CLI：

npm

$ npm install -D vite

Yarn

$ yarn add -D vite

pnpm

$ pnpm add -D vite

Bun

$ bun add -D vite

Deno

$ deno add -D npm:vite

並建立一個如下所示的 index.html 檔案：

<p>Hello Vite!</p>

然後在終端中執行相應的 CLI 命令：

npm

$ npx vite

Yarn

$ yarn vite

pnpm

$ pnpm vite

Bun

$ bunx vite

Deno

$ deno run -A npm:vite

index.html 將會在 https://:5173 被服務。

index.html 與專案根目錄

你可能已經注意到，在 Vite 專案中，index.html 處於核心地位，而不是被隱藏在 public 資料夾中。這是有意為之的：在開發過程中，Vite 是一個伺服器，而 index.html 是你應用程式的入口點。

Vite 將 index.html 視為原始碼，並將其作為模組圖的一部分。它會解析引用 JavaScript 原始碼的 <script type="module" src="...">。甚至內聯的 <script type="module"> 和透過 <link href> 引用的 CSS 也都享有 Vite 的特定功能。此外，index.html 中的 URL 會被自動處理，因此無需特殊的 %PUBLIC_URL% 佔位符。

類似於靜態 HTTP 伺服器，Vite 擁有“根目錄”的概念，你的檔案將從這裡被服務。在後續文件中，它會被稱為 <root>。原始碼中的絕對路徑將以專案根目錄為基準進行解析，因此你可以像使用普通的靜態檔案伺服器一樣編寫程式碼（只是功能強大得多！）。Vite 還能夠處理指向根目錄之外檔案系統的依賴項，這使得它在基於 Monorepo 的設定中也能使用。

Vite 還支援具有多個 .html 入口點的 多頁面應用。

指定備用根目錄

執行 vite 會以當前工作目錄作為根目錄啟動開發伺服器。你可以透過 vite serve some/sub/dir 指定一個備用根目錄。請注意，Vite 也會在專案根目錄中解析 其配置檔案 (即 vite.config.js)，因此如果更改了根目錄，你也需要移動該檔案。

命令列介面

在安裝了 Vite 的專案中，你可以在 npm 指令碼中使用 vite 二進位制檔案，或者直接透過 npx vite 執行。以下是 Vite 專案腳手架中的預設 npm 指令碼：

package.json

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

你可以指定額外的 CLI 選項，例如 --port 或 --open。欲獲取完整的 CLI 選項列表，請在你的專案中執行 npx vite --help。

瞭解更多關於 命令列介面 的資訊。

使用未釋出的提交

如果你等不及新版本的釋出來測試最新功能，可以透過 https://pkg.pr.new 安裝特定提交版本的 Vite。

npm

$ npm install -D https://pkg.pr.new/vite@SHA

Yarn

$ yarn add -D https://pkg.pr.new/vite@SHA

pnpm

$ pnpm add -D https://pkg.pr.new/vite@SHA

Bun

$ bun add -D https://pkg.pr.new/vite@SHA

將 SHA 替換為 Vite 提交記錄的 SHA。請注意，只有最近一個月內的提交才有效，因為舊的提交發佈會被清理。

或者，你也可以將 Vite 倉庫 克隆到本地機器，然後自行構建和連結（需要 pnpm）。

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link # use your preferred package manager for this step

然後轉到你的 Vite 專案並執行 pnpm link vite（或者你之前用於全域性連結 vite 的包管理器）。現在重啟開發伺服器，開始體驗最前沿的功能！

要了解更多關於 Vite 何時以及如何進行版本釋出的資訊，請檢視 釋出說明 文件。

依賴項使用 Vite

要替換依賴項間接使用的 Vite 版本，你應該使用 npm overrides 或 pnpm overrides。

社群

如果你有疑問或需要幫助，請在 Discord 和 GitHub Discussions 上聯絡社群。