资源
Nuxt 提供了两种处理资源的选项。
Nuxt 使用两个目录来处理样式表、字体或图像等资源。
公共目录
public/ 目录用作公共服务器，提供可在应用程序的定义 URL 上公开访问的静态资源。
您可以通过应用程序的代码或浏览器从根 URL / 获取 public/ 目录中的文件。
示例
例如，引用 public/img/ 目录中的图像文件，可在静态 URL /img/nuxt.png 访问：
app.vue
<template>
<img src="/img/nuxt.png" alt="发现 Nuxt 3" />
</template>
资源目录
Nuxt 使用 Vite（默认）或 webpack 来构建和打包您的应用程序。这些构建工具的主要功能是处理 JavaScript 文件，但可以通过 插件（对于 Vite）或 加载器（对于 webpack）扩展处理其他类型的资源，如样式表、字体或 SVG。此步骤主要是为了性能或缓存目的而转换原始文件（例如样式表压缩或浏览器缓存失效）。
按惯例，Nuxt 使用 assets/ 目录来存储这些文件，但该目录没有自动扫描功能，您可以使用其他名称。
在您的应用程序代码中，您可以通过使用 ~/assets/ 路径引用位于 assets/ 目录中的文件。
示例
例如，引用一个将被处理的图像文件，如果构建工具配置为处理此文件扩展名：
app.vue
<template>
<img src="~/assets/img/nuxt.png" alt="发现 Nuxt 3" />
</template>
全局样式导入
要在您的 Nuxt 组件样式中全局插入声明，您可以在 nuxt.config 文件中使用 Vite 选项。
示例
在这个示例中，有一个包含颜色变量的 sass 部分 文件，用于您的 Nuxt 页面 和 组件。
$primary: #49240F;
$secondary: #E4A79D;
在您的 nuxt.config
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "~/assets/_colors.scss" as *;'
}
}
}
}
})