跳轉至

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

專案結構與常用指令

用 npm create vite@latest 建立的專案，資料夾配置在不同框架範本之間大同小異。了解這個預設結構，能幫助你快速在陌生的 Vite 專案中找到該改的檔案。

預設資料夾配置

以 react-ts 範本為例：

my-app/
├── index.html          # 進入點，Vite 的「真正」起點
├── package.json        # 專案設定與 npm 腳本
├── vite.config.ts       # Vite 設定檔
├── tsconfig.json        # TypeScript 設定（若使用 TS 範本）
├── public/              # 原封不動複製到輸出目錄的靜態檔案
│   └── vite.svg
└── src/
    ├── main.tsx          # 應用程式進入點，掛載到 index.html
    ├── App.tsx           # 根元件
    ├── assets/           # 會被打包處理的資源（圖片、字型等）
    └── index.css         # 全域樣式

index.html 是進入點，不是模板

和許多傳統建置工具不同，Vite 專案的 index.html 不是放在 public/ 裡的靜態檔案，而是整個應用程式的進入點與開發伺服器的請求根目錄。index.html 裡會有一個 <script type="module" src="/src/main.tsx">，Vite 從這裡開始解析模組相依關係。

這代表：

  • index.html 可以直接寫在專案根目錄，Vite 開發伺服器會以它為首頁。
  • HTML 裡引用的 <script>、<link> 都會被 Vite 當作模組圖的一部分處理與打包。
  • 多頁應用（Multi-Page App）只需要在根目錄或子資料夾放多個 .html，並在 vite.config 的 build.rollupOptions.input 中列出即可。

public/ 與 src/assets 的差異

Vite 對兩種靜態資源分別處理：

位置 處理方式 適合放什麼
public/ 建置時原封不動複製到輸出目錄，不經過打包，也不會被檔名雜湊 favicon.ico、robots.txt，或需要以固定路徑存取的檔案
src/ 內以 import 引用的資源 經過 Vite 處理：加上內容雜湊、視大小決定是否轉為 base64、路徑會被自動改寫 元件會用到的圖片、字型等一般資源

詳細規則見〈靜態資源與 CSS 處理〉。

package.json 常用腳本

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

框架範本通常還會加上 lint（ESLint 檢查）等腳本，實際內容依範本而異，但 dev／build／preview 三者是所有 Vite 專案共通的核心指令，已在〈安裝與建立專案〉說明。

相關資料