什麼是 Vite？給應用程式建置者的白話指南

Vite（唸作「veet」，法文中的「快」）是用於網站與網頁應用程式的建置工具。你在建置時，它會執行一個開發伺服器，讓修改在瀏覽器中幾乎立即顯示。準備上線時，它會把程式碼打包成體積小、已最佳化的檔案，任何網頁主機都能提供服務。它是免費的開放原始碼，也是許多 React、Vue 和 Svelte 專案背後預設使用的工具。

為什麼用 AI 建置時要了解 Vite

你可能從來沒有輸入過 Vite 指令，但如果你的應用程式是用 AI 應用程式建置工具製作的，Vite 很可能正在執行它。Mythex 除非你另外指定，否則會以 Vite + React + TypeScript + Tailwind 開始新專案（技術是如何選定的）。

了解 Vite 的作用，能幫助你：

• 理解預覽。 當 AI 修改檔案時即時更新的預覽，通常就是 Vite 的開發伺服器。
• 理解部署。 Vite 應用程式會變成一個靜態檔案資料夾（HTML、JavaScript、CSS 和圖片），架設起來既便宜又簡單。
• 讀懂錯誤訊息。 當預覽出現紅色的錯誤覆蓋層或空白頁面時，通常是 Vite 在回報某個檔案編譯失敗。
• 知道它的限制。 Vite 只負責建置前端。如果你的應用程式需要後端——資料庫、機密的 API 金鑰、付款——那些需要在別處執行。請參閱前端與後端。

日常比喻

想像一間餐廳的廚房。

• 備料時（開發），主廚會邊做邊嚐、逐道調整。改一下調味，過一秒再嚐一次。這就是 Vite 的開發伺服器：你修改檔案，頁面立即更新，通常連你在表單中已輸入的內容都不會遺失。
• 外燴訂單（正式版），所有食物都要烹調、分裝、包裝並標示，讓它能安全運送並在任何地方供應。這就是 vite build：你的程式碼被打包、縮小並加上指紋，成為可在任何主機上執行的檔案。

同樣的食譜，兩種完全不同的處理方式，而 Vite 兩者都能做。

Vite 實際做什麼

現代網頁應用程式由許多檔案組成：元件、樣式、圖片和第三方函式庫。瀏覽器無法直接使用原始的這些內容。TypeScript 必須轉換成 JavaScript，React 的 JSX 必須被轉換，而 Tailwind 的 class 則必須轉換成 CSS。

Vite 以兩種模式處理這些工作：

較舊的工具在顯示任何內容之前會先把整個應用程式打包，因此啟動和更新大型專案可能要很久。Vite 的做法是在開發時跳過這一步，讓瀏覽器按需載入檔案。至於正式版，它仍會打包——從 Vite 8 起搭配名為 Rolldown 的打包器——因為對訪客來說，大量小檔案比少數最佳化過的檔案來得慢。

實例：Vite 專案裡有什麼

以下是一個小型 Vite + React 應用程式的大致結構：

my-app/
  index.html          ← 應用程式起始的那一個 HTML 頁面
  package.json        ← 函式庫與指令碼清單（dev、build）
  vite.config.ts      ← Vite 設定與外掛
  src/
    main.tsx          ← 啟動 React 並將它掛載到 index.html
    App.tsx           ← 你的應用程式最上層元件
    index.css         ← 樣式，例如 @import "tailwindcss";
  public/             ← 原樣複製的檔案（favicon、robots.txt）

以及 package.json 中的指令碼：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

現在追蹤一次修改：

1. 你請 AI「把標題改成藍色」。
2. 它在 App.tsx 中修改了一個 class。
3. Vite 察覺檔案已變更，只轉換該檔案，並把更新推送到瀏覽器。
4. 標題在預覽中變成藍色，通常不到一秒。

發佈時，vite build 會產生類似 dist/index.html 加上 dist/assets/index-a1b2c3.js 的檔案。檔名中看似隨機的部分會在內容改變時跟著改變，因此瀏覽器和 CDN 可以長時間快取檔案，而不會提供過期的程式碼。

Vite 中的環境變數

Vite 只會把名稱以 VITE_ 開頭的變數提供給瀏覽器端的程式碼，例如 VITE_PUBLIC_MAP_ID。這是一項安全措施：瀏覽器端的程式碼任何訪客都看得到，因此機密金鑰絕不能使用該前綴，必須留在後端。參閱環境變數與機密。

關鍵術語

常見迷思

• 「Vite 是一種框架。」 它是建置工具。React、Vue 或 Svelte 才是框架；Vite 負責執行與打包它。
• 「Vite 應用程式包含後端。」 標準的 Vite 應用程式只有前端。資料庫、登入和機密金鑰需要伺服器或 API 配合。
• 「可以把開發伺服器放上網路。」 它並非為真實流量設計。務必部署正式版建置的輸出。
• 「.env 中的東西都是機密。」 在 Vite 應用程式中，VITE_ 變數會被直接寫入每位訪客都會下載的檔案中。
• 「重新整理頁面出現 404 代表應用程式壞了。」 在單頁應用程式中，主機必須把每個路徑都導回 index.html。這是主機的設定問題，請參閱部署後如何修正 404 錯誤。

向 AI 建置工具提出的要求

• 「這個應用程式是純 Vite（前端），還是也有後端？每個部分在哪裡執行？」
• 「執行正式版建置，在發佈前修正所有錯誤與警告。」
• 「確認沒有機密金鑰放在 VITE_ 變數中，或任何前端程式碼裡。」
• 「預覽顯示空白頁面時，請檢查 Vite 與瀏覽器主控台的錯誤並修正原因。」參閱如何修正空白頁面。
• 「發佈後，請確保重新整理任何頁面網址都能正常運作，而不只是首頁。」

Mythex 中的 Vite

除非你要求 Next.js、靜態 HTML 或其他後端，每個新的 Mythex 專案都會以 Vite 開始。你私人沙盒中的即時預覽會隨代理程式編輯檔案而更新，而按下「發佈」會建置應用程式並部署——你不需要自己設定主機。如果之後需要 API 或資料庫，請在聊天中提出，Mythex 可以在 Vite 前端旁加入後端服務（多服務應用程式）。

常見問題