部署上線
npm run build 產出的 dist/ 是一組純靜態檔案，理論上可以部署到任何能服務靜態檔案的平台。本頁整理最常見的三種部署方式與各自需要注意的設定。
部署前的共同準備
- 確認
vite.config的base設定正確（見〈設定檔 vite.config〉）：部署到網域根目錄可省略，部署到子路徑（例如 GitHub Pages 的/repo/）必須設定，否則載入的資源路徑會出錯。 - 執行
npm run build，再用npm run preview在本機確認結果無誤（見〈打包與預覽〉）。 - 若專案是單頁應用（SPA）且有前端路由（如 React Router、Vue Router），部署平台需要設定「找不到路徑時 fallback 回
index.html」，否則重新整理子頁面會出現 404。
Vercel
Vercel 對 Vite 專案有原生支援，多數情況不需要手動設定：
- 將專案推上 GitHub／GitLab／Bitbucket。
- 在 Vercel 匯入該 repository，Vercel 會自動偵測為 Vite 專案，預設 Build Command 為
vite build、Output Directory 為dist。 - 之後每次推送到主分支，Vercel 會自動重新建置並部署，並提供每個 Pull Request 的預覽網址。
Netlify
Netlify 的流程與 Vercel 類似：連結 repository 後，設定 Build command 為 npm run build、Publish directory 為 dist。若專案使用前端路由，需在 public/_redirects 加入：
這行規則會讓所有找不到對應靜態檔案的請求，都導回 index.html，交由前端路由處理。
GitHub Pages
GitHub Pages 部署到的是網域下的子路徑（https://<使用者>.github.io/<repo>/），因此務必在 vite.config 設定 base: '/<repo>/'。常見做法是搭配 GitHub Actions，在 push 時自動執行 npm run build，並把 dist/ 內容發布到 gh-pages 分支或 Pages 服務；社群套件 gh-pages 與官方的 actions/deploy-pages 都是常見選擇。
三種平台比較
| 平台 | 適合情境 | 需要注意 |
|---|---|---|
| Vercel | 想要最少設定、自動預覽網址 | 免費額度足夠一般個人／小型專案 |
| Netlify | 需要自訂重導向規則、表單／函式等附加功能 | SPA 路由需手動加 _redirects |
| GitHub Pages | 開源專案、不需要伺服器端功能 | 子路徑部署務必設定 base |
推薦影音
把 Vite + React 專案部署到 Vercel
簡述：示範從打包、連結 Git repository 到 Vercel 自動部署上線的完整流程，適合第一次要把 Vite 專案發布到正式環境的讀者。