今天這一篇要解決的是另一種新手常見的痛點
專案越寫越亂，到底該怎麼整理？
我們會談三件事：

• src 裡面怎麼分資料夾
• .env 環境變數到底在幹嘛
• 圖片、資產要放哪才不會踩雷

1. src 資料夾怎麼整理比較不痛苦

一開始的src 長這樣：

src/
  App.jsx
  page1.jsx
  page2.jsx
  button.jsx
  card.jsx

比較友善的新手分法是依角色分類
一個常見、好維護的結構是：

• pages：頁面（通常對應路由）
• components：可重用元件
• assets：圖片、icon、字型
• utils：工具函式
  不用一次全部用上，但至少把「頁面」跟「元件」分開，之後會輕鬆很多～

2. .env 環境變數是拿來做什麼的

我們一定會遇到這種情況：

• 本機 API 是 localhost
• 上線後 API 換成正式網址
• 金鑰不想直接寫在程式裡
  這時候就該用 .env

Vite 的一個重要規則就是
所有可以在前端使用的環境變數
一定要以 VITE_ 開頭

例如在專案根目錄建立：

VITE_API_BASE_URL=http://localhost:8000

在程式中使用：

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;

常見 env 檔案用途

• .env：所有環境共用
• .env.development：開發用
• .env.production：正式環境用
  通常會準備一個 .env.example
  讓別人知道專案需要哪些設定，但不包含實際值

要注意.env 不是保險箱
前端的環境變數只要打包後，就有機會被看到
真正敏感的東西一定要放後端！

3. 圖片與資產該放 src/assets 還是 public

放在 src/assets 的情況

• 會用 import 引入
• 希望 build 時被處理、優化

import logo from "./assets/logo.png";

放在 public 的情況

• 不想被打包處理
• 想直接用網址存取

<img src="/banner.png" />

簡單記法：
要被 Vite 管、被打包 → src/assets
要原封不動當公開檔案 → public