资源
Nuxt 为你的资源提供两个选项。
Nuxt 使用两个目录来处理样式表、字体或图像等资源。
public/目录内容在服务器根目录下按原样提供服务。app/assets/目录按照约定包含你希望构建工具(Vite 或 webpack)处理的每个资源。
Public 目录
public/ 目录用作静态资源的公共服务器,在应用程序的已定义 URL 处公开可用。
你可以从应用程序的代码或浏览器通过根 URL / 获取 public/ 目录中的文件。
示例
例如,引用 public/img/ 目录中的图像文件,可在静态 URL /img/nuxt.png 处获得:
app/app.vue
<template>
<img
src="/img/nuxt.png"
alt="Discover Nuxt"
>
</template>
Assets 目录
Nuxt 使用 Vite(默认)或 webpack 来构建和打包你的应用程序。这些构建工具的主要功能是处理 JavaScript 文件,但可以通过 插件(对于 Vite)或 加载器(对于 webpack)进行扩展,以处理其他类型的资源,例如样式表、字体或 SVG。此步骤会转换原始文件,主要用于性能或缓存目的(例如样式表压缩或浏览器缓存失效)。
按照约定,Nuxt 使用 app/assets/ 目录来存储这些文件,但此目录没有自动扫描功能,你可以为其使用任何其他名称。
在应用程序的代码中,你可以使用 ~/assets/ 路径引用位于 app/assets/ 目录中的文件。
示例
例如,引用将在构建工具配置为处理此文件扩展名时进行处理的图像文件:
app/app.vue
<template>
<img
src="~/assets/img/nuxt.png"
alt="Discover Nuxt"
>
</template>