通过 100 多个技巧学习 Nuxt!

资源

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

资源目录

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

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

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

示例

例如,引用一个图片文件,如果配置了构建工具来处理此文件扩展名,则该图片文件将被处理

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