什麼係 Vite？畀 App 建構者嘅淺白指南
Vite（讀作「veet」，法文「快」嘅意思）係網站同網頁 App 嘅建構工具。你建構嗰陣，佢會運行一個開發伺服器，喺瀏覽器即時顯示你嘅改動。準備上線嗰陣，佢會將代碼打包成細細個、經過優化嘅檔案，任何網頁主機都可以提供服務。佢免費、開源，亦係好多 React、Vue 同 Svelte 項目背後預設使用嘅工具。
用 AI 建構時點解 Vite 重要
你可能永遠唔會親手輸入 Vite 指令，但如果你嘅 App 係用 AI App 建構工具建嘅，運行佢嘅好可能就係 Vite。Mythex 開新項目時預設用 Vite + React + TypeScript + Tailwind，除非你另外要求（點樣揀技術）。
明白 Vite 做乜嘢，有助你：
- 理解 Preview。 當 AI 改動檔案時即時更新嘅即時預覽，通常就係一個 Vite 開發伺服器。
- 理解部署。 Vite App 會變成一個靜態檔案資料夾，包括 HTML、JavaScript、CSS 同圖片，好平、好簡單就可以託管。
- 讀懂錯誤訊息。 當預覽出現紅色錯誤畫面或者空白頁，通常係 Vite 報告某個檔案編譯失敗。
- 知道佢嘅限制。 Vite 只負責建構前端。如果你嘅 App 需要後端，例如資料庫、保密嘅 API 金鑰、付款功能，嗰啲要喺另一個地方運行。參閱 frontend vs backend。
日常比喻
諗吓一間餐廳嘅廚房。
- 備餐時（開發），廚師一邊烹調一邊試味，調整每道菜。改咗調味，即刻再試。呢個就係 Vite 嘅開發伺服器：你改一個檔案，頁面即時更新，通常連你喺表格入面打咗嘅字都唔會消失。
- 外賣訂單（正式版），所有嘢要煮好、分好份量、打包、貼好標籤，方便運送，亦可以喺任何地方供應。呢個就係
vite build：你嘅代碼會被捆綁、縮小，並加上獨特嘅檔名，準備好俾任何主機使用。
食譜相同，但處理方式兩種截然不同，而 Vite 兩種都做。
Vite 實際做乜
現代網頁 App 由好多檔案組成：元件、樣式、圖片同第三方函式庫。瀏覽器唔可以直接用晒所有嘢。TypeScript 要轉換成 JavaScript，React 嘅 JSX 要轉換，而 Tailwind 類別要轉換成 CSS。
Vite 分兩種模式處理呢啲工作：
開發（npm run dev） | 正式版（npm run build） | |
|---|---|---|
| 目標 | 建構時快速回饋 | 俾真正訪客用嘅細小、快速檔案 |
| 做法 | 利用瀏覽器原生嘅 JavaScript 模組，按需要提供檔案，只轉換頁面要求嘅部分 | 將所有代碼捆綁一齊，移除冇用嘅部分，縮小檔案，並加上利於緩存嘅檔名 |
| 更新 | 熱模組替換（HMR）：改動即時出現，唔使完全重新載入 | 重新建構並重新部署 |
| 輸出 | 唔會儲存任何嘢；預設喺 http://localhost:5173 運行 | 一個 dist/ 靜態檔案資料夾 |
舊式工具喺顯示任何嘢之前，會先將整個 App 捆綁，所以啟動同更新大型項目可能要好耐。Vite 嘅竅門，就係開發時跳過呢個步驟，讓瀏覽器按需要載入檔案。至於正式版，佢仍然會捆綁——由 Vite 8 開始，用一個叫 Rolldown 嘅打包工具——因為好多細檔案對訪客嚟講，會比幾個經過優化嘅大檔案慢。
實際例子：Vite 項目入面有乜
以下係一個細小 Vite + React App 嘅大概結構：
my-app/
index.html ← App 開始時載入嘅唯一 HTML 頁面
package.json ← 函式庫同指令碼清單（dev、build）
vite.config.ts ← Vite 設定同插件
src/
main.tsx ← 啟動 React，並掛載到 index.html
App.tsx ← 你 App 最頂層嘅元件
index.css ← 樣式，例如 @import "tailwindcss";
public/ ← 原樣複製嘅檔案（favicon、robots.txt）
以及 package.json 入面嘅指令碼：
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
跟住睇一個單一改動嘅過程：
- 你要求 AI「將標題變成藍色」。
- 佢喺
App.tsx改咗一個類別。 - Vite 發現檔案改咗，只轉換嗰個檔案，並將更新推送去瀏覽器。
- 標題喺預覽入面變成藍色，通常一秒之內就完成。
當你發佈嗰陣，vite build 會生成類似 dist/index.html 同 dist/assets/index-a1b2c3.js 嘅檔案。檔名入面睇落好似隨機嘅部分，會隨住內容改變而改變，咁樣瀏覽器同 CDN 就可以長時間緩存檔案，而唔會提供過時嘅代碼。
Vite 嘅環境變數
Vite 只會將名稱以 VITE_ 開頭嘅變數提供俾瀏覽器代碼使用，例如 VITE_PUBLIC_MAP_ID。呢個係一種安全措施：瀏覽器代碼入面嘅任何嘢，訪客都睇得到，所以保密嘅金鑰絕對唔可以用呢個前綴，必須留喺後端。參閱 environment variables and secrets。
常用詞語
| 詞語 | 意思 |
|---|---|
| 建構工具（Build tool） | 將源代碼轉換成瀏覽器可以運行檔案嘅軟件。 |
| 開發伺服器（Dev server） | 用於開發嘅本地網頁伺服器，可以快速重新載入改動。 |
| HMR（熱模組替換） | 將改動嘅代碼放入正在運行嘅頁面，唔使完全重新載入。 |
| 捆綁（Bundle） | 將好多源檔案合併成較少、經過優化嘅檔案。 |
| 縮小（Minify） | 移除空格並縮短名稱，令檔案更細。 |
dist 資料夾 | Vite 嘅輸出資料夾，就係你真正部署嘅檔案。 |
| 插件（Plugin） | 教 Vite 新技能嘅附加組件，例如支援 React 或 Tailwind。 |
| SPA（單頁應用程式） | 只載入一個 HTML 頁面，然後用 JavaScript 切換畫面嘅 App。 |
常見誤解
- 「Vite 係一個框架。」 佢係建構工具。React、Vue 或 Svelte 才係框架；Vite 負責運行同打包佢哋。
- 「Vite App 包括後端。」 標準 Vite App 只係前端。資料庫、登入同保密金鑰需要伺服器或者 API 配合。
- 「開發伺服器放上網都無問題。」 佢並非為真實流量而設。一定要部署正式版建構嘅輸出。
- 「
.env入面嘅嘢都係保密嘅。」 喺 Vite App 入面，VITE_變數會被直接寫入每個訪客下載嘅檔案。 - 「頁面出現 404 就代表 App 壞咗。」 喺單頁應用程式入面，主機必須將所有路由送回
index.html。呢個係主機嘅設定問題，參閱部署後點樣修正 404 錯誤。
要問 AI 建構工具嘅嘢
- 「呢個 App 係純 Vite 前端，定係仲有後端？每一部分分別喺邊度運行？」
- 「運行正式版建構，喺發佈之前修正所有錯誤同警告。」
- 「檢查有冇任何保密金鑰放喺
VITE_變數入面，或者任何前端代碼入面。」 - 「預覽顯示空白頁，請檢查 Vite 同瀏覽器控制台嘅錯誤，並修正原因。」參閱點樣修正空白白頁。
- 「發佈之後，確保刷新任何頁面網址都可以運作，唔止係主頁。」
Mythex 入面嘅 Vite
除非你要求 Next.js、純 HTML 或者另一種後端，否則每個新 Mythex 項目都會以 Vite 開始。你私人沙盒入面嘅即時 Preview 會隨住 agent 改檔案而更新，而 Publish 會建構 App 並部署——你唔使自己設定任何主機。如果之後需要 API 或資料庫，喺對話入面要求，Mythex 就可以喺 Vite 前端旁邊加入後端服務（多服務 App）。
常見問題
簡單嚟講，什麼係 Vite？
Vite 係網站同網頁 App 嘅建構工具。你工作嗰陣，佢會運行一個快速嘅開發伺服器，幾乎即時顯示改動；準備上線嗰陣，佢會將代碼打包成細細個、經過優化嘅檔案，任何網頁主機都可以提供服務。
Vite 點讀？
讀作「veet」，同法文「快」字嘅發音相近，而呢個名字嘅意思正正就係「快」。
Vite 係咪好似 React 或者 Next.js 咁嘅框架？
唔係。Vite 係建構工具，唔係介面框架。佢負責運行同打包用 React、Vue、Svelte 或者純 JavaScript 寫成嘅 App。Next.js 係一個有自己建構系統嘅完整框架，所以 Next.js App 唔會用 Vite。
喺 Vite 項目入面，npm run dev 同 npm run build 有咩分別？
npm run dev 會啟動開發伺服器，用嚟建構同測試，並且即時更新。npm run build 會生成經過優化嘅正式版檔案，通常放喺 dist 資料夾入面，呢啲就係你要部署嘅檔案。
Vite 係免費嘅嗎？
係。Vite 係免費嘅開源軟件，採用 MIT 授權。