開始使用

概述

Vite（法語，意為「快速」，發音為 /vit/，類似 "veet"）是一個建置工具，旨在為現代 Web 專案提供更快、更精簡的開發體驗。它由兩個主要部分組成：

• 一個開發伺服器，提供比原生 ES 模組更豐富的功能增強，例如極快的熱模組替換 (HMR)。

• 一個建置命令，使用Rollup捆綁您的程式碼，並預先配置為輸出高度優化的靜態資源以用於生產環境。

Vite 是有主見的，並附帶了合理的預設值。請閱讀功能指南以了解可能實現的功能。透過外掛可以支援框架或與其他工具整合。配置章節說明了如果需要如何調整 Vite 以符合您的專案。

Vite 也透過其外掛 API和JavaScript API高度可擴展，並具有完整的型別支援。

您可以在為何選擇 Vite章節中了解更多關於專案背後的理念。

瀏覽器支援

在開發期間，Vite 將esnext設定為轉換目標，因為我們假設使用現代瀏覽器，且它支援所有最新的 JavaScript 和 CSS 功能。這樣可以防止語法降級，使 Vite 提供的模組盡可能接近原始程式碼。

對於生產環境建置，預設情況下，Vite 以支援原生 ES 模組、原生 ESM 動態導入和import.meta的瀏覽器為目標。傳統瀏覽器可以透過官方的@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 專案

相容性注意事項

Vite 需要Node.js 版本 18+ 或 20+。但是，有些範本需要更高的 Node.js 版本才能運作，如果您的套件管理器警告您，請升級。

npm

$ npm create vite@latest

Yarn

$ yarn create vite

pnpm

$ pnpm create vite

Bun

$ bun 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

請參閱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。

您可以使用 . 作為專案名稱，以在目前目錄中建立專案。

社群範本

create-vite 是一個用於從熱門框架的基本範本快速開始專案的工具。請查看 Awesome Vite 以取得社群維護的範本，其中包含其他工具或以不同的框架為目標。

對於 https://github.com/user/project 上的範本，您可以使用 https://github.stackblitz.com/user/project 在線上試用（在專案的 URL 中的 github 後面加入 .stackblitz）。

您也可以使用像 degit 這樣的工具，使用其中一個範本來建立您的專案。假設專案在 GitHub 上，並使用 main 作為預設分支，您可以使用以下方法建立本機副本：

npx degit user/project#main 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

並建立一個像這樣的 index.html 檔案：

<p>Hello Vite!</p>

然後在您的終端機中執行適當的 CLI 命令

npm

$ npx vite

Yarn

$ yarn vite

pnpm

$ pnpm vite

Bun

$ bunx vite

index.html 將在 https://127.0.0.1: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>。您原始程式碼中的絕對 URL 將使用專案根目錄作為基礎來解析，因此您可以編寫程式碼，就像您正在使用正常的靜態檔案伺服器一樣（除了功能更強大！）。Vite 也能夠處理解析為根目錄外檔案系統位置的依賴項，這使其即使在基於單一程式碼儲存庫的設定中也能使用。

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。

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

使用未發佈的提交

如果您迫不及待要測試新版本中的最新功能，您需要將vite 儲存庫複製到您的本機電腦，然後自行建置和連結它（需要pnpm）

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

然後前往您基於 Vite 的專案，並執行 pnpm link --global vite（或您用來全域連結 vite 的套件管理器）。現在重新啟動開發伺服器以使用最新版本！

社群

如果您有問題或需要協助，請在 Discord 和 GitHub Discussions 聯絡社群。