資源 · Nuxt 入門

Nuxt 使用兩個目錄來處理樣式表、字體或圖像等資源。

public/ 目錄的內容會原封不動地在伺服器根目錄提供。
assets/ 目錄依照慣例包含您希望建置工具（Vite 或 webpack）處理的每個資源。

Public 目錄

public/ 目錄用作靜態資源的公共伺服器，這些資源可在應用程式的已定義 URL 上公開使用。

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

範例

例如，參照 public/img/ 目錄中的影像檔案，該檔案可在靜態 URL /img/nuxt.png 上取得

app.vue

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

Assets 目錄

Nuxt 使用 Vite（預設）或 webpack 來建置和捆綁您的應用程式。這些建置工具的主要功能是處理 JavaScript 檔案，但它們可以透過外掛程式（適用於 Vite）或載入器（適用於 webpack）來延伸，以處理其他類型的資源，例如樣式表、字型或 SVG。此步驟主要出於效能或快取目的（例如樣式表縮減或瀏覽器快取失效）而轉換原始檔案。

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

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

範例

例如，引用一個圖片檔案，如果建置工具設定為處理此檔案擴展名，該檔案將會被處理。

app.vue

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

Nuxt 不會以靜態 URL（例如 /assets/my-file.png）提供 assets/ 目錄中的檔案。如果您需要靜態 URL，請使用 public/ 目錄。

視圖

Nuxt 提供了多個元件層來實現應用程式的使用者介面。

樣式

了解如何設定 Nuxt 應用程式的樣式。