建立 2026-09-16 更新 2026-09-16

安裝與建立專案

Vite 不需要另外「安裝」成全域工具，而是透過套件管理工具的初始化指令，直接建立一個已經設定好 Vite 的專案骨架。本頁說明環境需求、建立專案的方式，以及專案建好後最常用的三個指令。

環境需求

在終端機執行：

npm create vite@latest

指令會依序詢問專案名稱、要使用的框架（Vanilla、Vue、React、Preact、Lit、Svelte、Solid、Qwik…）與變體（例如 JavaScript 或 TypeScript）。若想跳過互動選單，直接指定專案名稱與範本：

npm create vite@latest my-app -- --template react-ts

--template 後面接的字串代表框架與語言組合，常見選項如 vanilla、vanilla-ts、vue、vue-ts、react、react-ts、svelte、svelte-ts。完整列表以官方文件為準。

專案建立完成後，依提示安裝依賴並啟動：

cd my-app
npm install
npm run dev

Vite 專案的 package.json 預設會有三個腳本，涵蓋開發到正式上線的完整流程：

指令	作用
`npm run dev`	啟動開發伺服器，提供即時熱更新（HMR），適合開發階段使用。
`npm run build`	將專案打包為最佳化的靜態檔案，輸出到 `dist/` 資料夾，用於正式部署。
`npm run preview`	在本機啟動一個簡易伺服器，預覽 `build` 打包後的結果，確認上線前的行為與開發模式一致。

實務上的流程通常是：開發時持續執行 dev；準備上線前先 build，再用 preview 確認打包結果無誤，才部署到正式環境。

為什麼要用 preview 而不是直接看 dev？

開發模式與打包後的正式版本，載入方式不完全相同（例如是否有壓縮、code splitting）。只在 dev 測試，可能看不出打包後才會出現的問題，因此上線前建議一定要跑一次 preview 再確認。