Question

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

• public/ 目录 内容按原样在服务器根目录下提供。
• assets/ 目录 按照惯例包含您希望构建工具（Vite 或 webpack）处理的每个资产。

Public 目录

public/ 目录 用作静态资产的公共服务器，可在您的应用程序定义的 URL 上公开访问。

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

示例

Nuxt 使用 Vite 或 webpack 来构建和捆绑您的应用程序。 这些构建工具的主要功能是处理 JavaScript 文件，但可以通过 plugins (for 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/ 目录中提供文件，如 /assets/my-file.png。 如果您需要静态 URL，请使用 public/ 目录。

全局样式导入

要在您的 Nuxt 组件样式中全局插入语句，您可以在 nuxt.config 文件中配置。

示例

在此示例中，有一个 sass partial 文件，其中包含您的 Nuxt 页面 和 组件

assets/_colors.scss

$primary: #49240F;
$secondary: #E4A79D;

assets/_colors.sass

$primary: #49240F
$secondary: #E4A79D

In your 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'
        }
      }
    }
  }
})