05
Re:Nuxt 100 天練習曲
Day 5
你的素材倉庫 public vs. assets
Day 5·資源管理·檔案結構
網站不只有程式碼，還需要圖片、CSS 樣式表、字體等「素材」。
在 Nuxt 中，有兩個地方可以放這些東西：public/ 和 assets/。它們的用途完全不同，讓我們用一個簡單的比喻來理解。
1. 公共倉庫：public/
把它想像成一個公共倉庫。
你把東西（比如 logo.png）原封不動地放進去，它的「地址」就固定了。任何人都可以直接透過這個地址，拿到一模一樣的東西。
特點
原封不動：Nuxt 不會對裡面的檔案做任何處理或優化。
固定網址：檔案路徑就是網址路徑。放在 public/img/logo.png 的圖，網址就是 你的網站/img/logo.png。
使用方法
直接用 / 開頭的路徑引用。
使用範例
<img src="/img/logo.png" alt="公司Logo" />使用時機
當你需要一個固定不變的網址時，例如 favicon.ico (網站小圖示) 或 robots.txt (給搜尋引擎看的檔案)。
2. 智慧加工廠：assets/
把它想像成一個智慧加工廠。
你把「原料」（比如一張很大的圖片或 CSS 檔案）送進去，工廠 (Vite) 會自動幫你壓縮、優化、打包，變成最高效的版本再交給你用。
特點
會被加工：檔案會被優化，讓網站效能更好。
沒有固定網址：加工後的檔案名稱可能會變，所以不能直接猜網址。
使用方法
必須用 ~/assets/ 這個特殊路徑來引用，告訴 Nuxt：「嘿，去加工廠幫我拿這個材料！」
使用範例
<img src="~/assets/img/background.jpg" alt="背景圖" />使用時機
絕大部分情況。你的 CSS、主要的圖片、自訂字體等，都應該放這裡。
今日總結：該用哪一個？
記住這個簡單的原則：
一律先放 assets/ (加工廠)，讓網站效能最佳化。
只有當你需要一個絕對固定的公開網址時，才放到 public/ (倉庫)。
了解這兩個資料夾的區別，可以幫助你更好地管理專案資源。今天也辛苦了！
| 特性 | public/ | assets/ |
|---|---|---|
| 檔案處理 | 原封不動 | 壓縮優化 |
| 網址 | 固定可預測 | 動態變化 |
| 引用方式 | /path/file.ext | ~/assets/path/file.ext |
| 適用場景 | SEO 檔案、圖示 | 圖片、CSS、字體 |