打包與預覽
開發時享受 Vite 的即時體驗之後，正式上線前需要把專案打包成靜態檔案。這一頁說明 vite build 做了什麼、輸出結果長什麼樣子，以及如何在本機驗證打包後的行為。
build 做了什麼
執行：
Vite 會呼叫 Rollup（新版本逐步採用以 Rust 撰寫的 Rolldown 作為底層打包器）產出正式環境用的靜態資源，主要包含：
- 模組打包與 Tree Shaking：把相依的模組合併，並移除未被實際使用到的程式碼。
- 程式碼壓縮（minify）：預設使用 esbuild 壓縮 JavaScript、CSS，大幅縮小檔案體積。
- 檔名雜湊（content hash）：輸出檔名會依內容加上雜湊值（例如
index-4f8a2c1b.js），方便瀏覽器與 CDN 做長效快取，內容一變檔名就變，不需要手動清快取。 - 程式碼分割（code splitting）：依動態
import()自動拆分成多個 chunk，讓使用者只下載當下頁面真正需要的程式碼。
打包完成後，預設輸出到專案根目錄的 dist/ 資料夾，內容是一組可以直接部署到任何靜態伺服器的檔案（HTML、CSS、JS、圖片等）。
用 preview 驗證打包結果
開發模式（vite）與打包後的正式版本，執行方式並不完全相同：開發時是即時編譯、未壓縮；打包後是預先產生、壓縮過的靜態檔案。因此上線前應該用：
這個指令會在本機啟動一個簡易靜態伺服器，直接服務 dist/ 裡的內容，讓你在部署前用「和正式環境相同的檔案」做最後確認，包含路由、資源載入路徑是否正確等。
preview 不是給正式環境用的伺服器
vite preview 只是方便本機驗證，效能與安全性都不是為正式流量設計。實際上線請依〈部署上線〉的做法，改用 Nginx、Vercel、Netlify 等正式的靜態網站服務。
常見打包設定
在 vite.config 的 build 選項中，比較常調整的項目：
export default {
build: {
outDir: 'dist', // 輸出資料夾，預設就是 dist
sourcemap: true, // 是否產生 sourcemap，方便正式環境除錯
target: 'es2020', // 打包目標的 JavaScript 版本
},
}
其中 base 選項（放在設定檔最外層）決定部署後靜態資源的根路徑，例如部署到 GitHub Pages 的子路徑（https://user.github.io/repo/）時，通常需要設定 base: '/repo/'，否則載入資源會找錯路徑。