👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。
在 Nuxt 3 的專案根目錄下，存在一個名為 public 的目錄，這個目錄如同 Vue 中的 public 目錄或 Nuxt 2 中的 static 目錄。這個目錄下的檔案，將會由 Nuxt 直接於網站的根路徑，例如 / 提供存取。
Public 目錄下的檔案不會經過 Vite 或 Webpack 打包工具編譯處理，最終檔案名稱也會與存在在 Public 內的檔案名稱相同。
Nuxt 3 使用 Vite 或 Webpack 來建構專案進行打包，這些建構工具主要功能是用來處理 Vue、JavaScript 檔案將其編譯、轉換或壓縮等，但它們可以透過各自的插件或 Loader 來處理其他檔案類型的資源，例如 Sass 的樣式就會經過插件或 Loader 來進行 CSS 的預處理及編譯，這些靜態資源通常也會放置在 Assets 目錄，例如樣式、字體、圖片等。
因為 Assets 目錄下檔案會經過編譯與最佳化處理，所以產生出來的檔案可能跟原始檔案不同，甚至會產生包含 Hash 雜湊字串的檔案名稱來提供訪問，加上 Hash 字串主要可以是為了解決瀏覽器可能快取著上一個網站打包版本的靜態資源或 Vue 程式碼檔案。
| 特性 | Public 目錄 | Assets 目錄 |
|---|---|---|
| 使用方式 | 網址 | 需要載入 |
| 最佳化 | ❌ 否 | ✅ 是 |
| 透過網址訪問 | ✅ 根目錄下 | 🚧 會添加 Hash |
| 適合檔案性質 | 不常變動 | 經常變動 |
感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。
範例程式碼
參考資料
iThome鐵人賽
看影片追技術