资源

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

• public/ 目录中的内容会按原样作为服务器根目录下的公共资源提供。
• assets/ 目录按约定包含了你希望构建工具（Vite或webpack）处理的所有资源。

公共目录

public/ 目录用作应用程序的公共服务器，用于存放在应用程序的指定URL下公开访问的静态资源。

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

示例

例如，在 public/img/ 目录中引用一个图像文件，该文件可通过静态URL /img/nuxt.png 访问：

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

资源目录

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

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

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

示例

例如，引用一个图像文件，如果构建工具配置为处理该文件扩展名：

<template>
  <img src="~/assets/img/nuxt.png" alt="Discover 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 *;'
        }
      }
    }
  }
})