资产

Nuxt 使用两个目录来处理样式表、字体或图像等资产。

• public/ 目录的内容会按原样在服务器根目录提供。
• app/assets/ 目录按照约定包含所有您希望构建工具（Vite 或 webpack）处理的资产。

Public 目录

public/ 目录用作静态资产的公共服务器，这些资产可在您应用程序的定义 URL 下公开访问。

您可以从应用程序代码或浏览器中通过根 URL / 获取 public/ 目录中的文件。

示例

例如，引用 public/img/ 目录中的图像文件，该文件可在静态 URL /img/nuxt.png 处访问。

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

Assets 目录

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>