资源

Nuxt 提供了两种选项来处理你的资源

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

• public目录中的内容会按照原样作为服务器根目录下的公共资源提供

• assets目录按照约定包含了你希望构建工具处理的所有资源

公共目录

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

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

示例:

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

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

资源目录:

Nuxt 使用Vite来构建和打包你的应用程序,这些构建工具的主要功能是处理 JS 文件

但它们可以通过 插件（对于 Vite）或 加载器（对于 webpack）来处理其他类型的资源，如样式表、字体或 SVG。

此步骤主要是为了提高性能或缓存目的而对原始文件进行转换（例如样式表的缩小或浏览器缓存失效）。

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

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

示例:

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

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

INFO

Nuxt 不会将assets/目录中的文件作为静态 URL(如/assets/my-file.png)提供.

如果你需要一个静态 URL 请使用public/目录

全局样式导入 Sass 变量

要在你的 Nuxt 组件样式中全局插入语句，你可以在 nuxt.config 文件中使用 Vite 选项。

• 示例

在这个示例中,有一个sass部分文件,其中包含了颜色变量,提供给 Nuxt 使用

/* assets/sass/variables.scss */
$primary: #49240F;
$secondary: #F0ECE3;

• 使用的时候

在你的nuxt.config.js中, 这样就全局导入了

// nuxt.config.js
export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;',
        },
      },
    },
  },
});