资源管理

Nuxt 使用两个目录来处理诸如样式表、字体或图像之类的资源。

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

Public 目录

public/ 目录作为公共服务器，用于静态资源，这些资源可通过应用的定义 URL 公共访问。

你可以通过根 URL / 从你的应用代码或浏览器中访问 public/ 目录中的文件。

示例

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

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

Assets 目录

Nuxt 使用 Vite（默认）或 webpack 构建和打包你的应用。这些构建工具的主要功能是处理 JavaScript 文件，但它们可以通过 插件（针对 Vite）或 加载器（针对 webpack）扩展来处理其它类型的资源，比如样式表、字体或 SVG。这一步会转换原始文件，主要是为了性能或缓存目的（例如样式表压缩或浏览器缓存失效）。

按约定，Nuxt 使用 app/assets/ 目录来存放这些文件，但此目录没有自动扫描功能，你也可以使用其它名称。

在你的应用代码中，可以使用 ~/assets/ 路径来引用位于 app/assets/ 目录中的文件。

示例

例如，引用一个图像文件，如果构建工具配置了处理该文件扩展名，则此文件将被处理：

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