v3.17

资源

Nuxt 为你的资源提供了两种选择。

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

¥Nuxt uses two directories to handle assets like stylesheets, fonts or images.

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

公共目录

¥Public Directory

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

¥The public/ directory is used as a public server for static assets publicly available at a defined URL of your application.

你可以从应用代码中获取 public/ 目录中的文件，也可以通过根 URL / 从浏览器中获取。

¥You can get a file in the public/ directory from your application's code or from a browser by the root URL /.

示例

¥Example

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

¥For example, referencing an image file in the public/img/ directory, available at the static URL /img/nuxt.png:

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

资源目录

¥Assets Directory

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

¥Nuxt uses Vite (default) or webpack to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through plugins (for Vite) or loaders (for webpack) to process other kinds of assets, like stylesheets, fonts or SVGs. This step transforms the original file, mainly for performance or caching purposes (such as stylesheet minification or browser cache invalidation).

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

¥By convention, Nuxt uses the assets/ directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.

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

¥In your application's code, you can reference a file located in the assets/ directory by using the ~/assets/ path.

示例

¥Example

例如，引用一个图片文件，该文件将在构建工具配置为处理此文件扩展名时进行处理：

¥For example, referencing an image file that will be processed if a build tool is configured to handle this file extension:

app.vue
<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt" />
</template>
Nuxt 不会像 /assets/my-file.png 那样通过静态 URL 提供 assets/ 目录中的文件。如果你需要静态 URL，请使用 public/ 目录。