资源管理

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" />
</template>

Assets 目录

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

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

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

示例

例如,引用一张如果构建工具配置了对应文件扩展名,将会被处理的图片文件:

app.vue
<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt" />
</template>
Nuxt 不会将 assets/ 目录中的文件作为静态 URL 提供服务,比如 /assets/my-file.png。如果你需要静态 URL,请使用 public/ 目录。