資產

Nuxt 使用兩個目錄來處理樣式表、字型或影像等資產。

• public/ 目錄的內容按原樣在伺服器根目錄提供。
• app/assets/ 目錄根據慣例包含您希望構建工具（Vite 或 webpack）處理的所有資產。

公共目錄

public/ 目錄用作靜態資產的公共伺服器，這些資產可在您應用程式的定義 URL 處公開訪問。

您可以從應用程式程式碼或瀏覽器中透過根 URL / 獲取 public/ 目錄中的檔案。

示例

例如，引用 public/img/ 目錄中的影像檔案，可透過靜態 URL /img/nuxt.png 訪問

<template>
  <img
    src="/img/nuxt.png"
    alt="Discover Nuxt"
  >
</template>

資產目錄

Nuxt 使用Vite（預設）或webpack來構建和打包您的應用程式。這些構建工具的主要功能是處理 JavaScript 檔案，但它們可以透過plugins（對於 Vite）或載入器（對於 webpack）進行擴充套件以處理其他型別的資產，如樣式表、字型或 SVG。此步驟會轉換原始檔案，主要是為了效能或快取目的（例如樣式表壓縮或瀏覽器快取失效）。

按照慣例，Nuxt 使用 app/assets/ 目錄來儲存這些檔案，但此目錄沒有自動掃描功能，您可以使用任何其他名稱。

在您的應用程式程式碼中，您可以使用 ~/assets/ 路徑引用位於 app/assets/ 目錄中的檔案。

示例

例如，引用一個影像檔案，如果配置了構建工具來處理此副檔名，則該檔案將被處理。

<template>
  <img
    src="~/assets/img/nuxt.png"
    alt="Discover Nuxt"
  >
</template>