资产

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/ 目录。