靜態資源

Nuxt 提供了兩個目錄來管理靜態資源：public/ 與 assets/。了解它們的差異對於優化網站效能至關重要。

核心概念

簡單來說：如果你希望檔案被 Vite 處理（壓縮、雜湊命名、轉譯），請放在 assets/。如果你希望檔案保持原樣（如 robots.txt），請放在 public/。

public/

直接映射到網站根目錄 (/)
不經過編譯或壓縮
適合 robots.txt, favicon.ico, CNAME

assets/

由 Vite 處理 (Build Pipeline)
支援 CSS Pre-processors (Sass, Tailwind)
自動雜湊命名 (Cache Busting)

Public 目錄

放在這裡的檔案可以透過 /filename 直接存取。

File System

public/robots.txt

Browser URL

https://site.com/robots.txt

Assets 目錄

這裡的檔案需要透過 ~/assets/ 路徑引用。 Vite 會將其轉換為帶有 Hash 的檔名，以利於瀏覽器快取。

Vite Processing

assets/logo.png

_nuxt/logo.a1b2c3.png

<template>
  <!-- 引用 assets 目錄下的圖片 -->
  <img src="~/assets/img/logo.png" alt="Logo" />
  
  <!-- 在 CSS 中引用 -->
  <div class="bg-[url('~/assets/bg.jpg')]"></div>
</template>

圖片優化

建議使用 Nuxt Image 模組。它可以自動調整大小、轉換格式 (WebP/Avif) 並支援 Lazy Loading，大幅提升 Core Web Vitals 分數。

Original (Standard <img>)

FormatJPEG

Size2.5 MB

LoadingEager (Blocks Render)

Optimized (<NuxtImg>)

FormatWebP

Size150 KB (-94%)

LoadingLazy (On Viewport)

<template>
  <NuxtImg 
    src="/photo.jpg" 
    width="500" 
    format="webp" 
    loading="lazy" 
    placeholder
  />
</template>