资源

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>

assets/ 目录

Nuxt使用Vite或webpack来构建和打包您的应用程序。这些构建工具的主要功能是处理JavaScript文件，但它们可以通过plugins（对于Vite）或 loaders（对于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/目录。

全局样式导入

如果需要在Nuxt组件的样式中全局插入语句，您可以在nuxt.config文件中使用“Vite配置项”。

例子

在这个例子中，有一个包含颜色变量的Sass部分文件，可以供您的Nuxt页面和组件使用。(下面的代码二选一)

// assets/_colors.scss
$primary: #49240F;
$secondary: #E4A79D;

// assets/_colors.sass
$primary: #49240F
$secondary: #E4A79D

在 nuxt.config中，您可以像这样配置：(下面的代码二选一)

// 使用的是scss
export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;'
        }
      }
    }
  }
})

// 使用的是sass
export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        sass: {
          additionalData: '@use "@/assets/_colors.sass" as *\n'
        }
      }
    }
  }
})