资源管理

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

• public/ 目录中的内容会原样在服务器根目录下提供。
• 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 文件，但它们可以通过 插件（针对 Vite）或 loaders（针对 webpack）扩展以处理其他类型的资源，如样式表、字体或 SVG。此步骤会对原始文件进行转换，主要出于性能或缓存的考虑（例如样式表的压缩或浏览器缓存失效）。

按照惯例，Nuxt 使用 assets/ 目录存储这些文件，但此目录不会自动扫描，你也可以为其使用其他名称。

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

示例

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

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