资源管理

Nuxt 提供两种资源管理选项。

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

  • public/ 目录的内容将原样被服务于服务器根目录。
  • assets/ 目录按照约定包含每个您希望构建工具(Vite 或 webpack)处理的资源。

公共目录

public/ 目录被用作可在您的应用程序定义 URL 处公开可用的静态资源的公共服务器。

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

示例

例如,引用位于 public/img/ 目录中的图像文件,静态 URL 为 /img/nuxt.png

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

资源目录

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

按照约定,Nuxt 使用 assets/ 目录来存储这些文件,但该目录没有自动扫描功能,您可以为其使用任何其他名称。

在应用程序的代码中,您可以通过使用 ~/assets/ 路径来引用位于 assets/ 目录中的文件。

示例

例如,引用一个图像文件,如果构建工具被配置为处理该文件扩展名,则该文件将被处理:

app.vue
<template>
  <img src="~/assets/img/nuxt.png" alt="发现 Nuxt" />
</template>
Nuxt 不会在静态 URL /assets/my-file.png 下服务 assets/ 目录中的文件。如果需要静态 URL,请使用 public/ 目录。