资源 · Nuxt 入门

Nuxt 使用两个目录来处理诸如样式表、字体或图像之类的资源。

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

公共目录

public/ 目录用作静态资源的公共服务器，这些静态资源在应用程序的已定义 URL 上公开可用。

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

示例

例如，引用 public/img/ 目录中的图像文件，该文件在静态 URL /img/nuxt.png 上可用。

app.vue

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

资源目录

Nuxt 使用 Vite（默认）或 webpack 来构建和打包您的应用程序。这些构建工具的主要功能是处理 JavaScript 文件，但可以通过插件（对于 Vite）或加载器（对于 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 组件样式中插入语句，您可以使用 Vite 选项在您的 nuxt.config 文件中。

示例

在此示例中，有一个 sass 部分文件包含颜色变量，供您的 Nuxt 页面和组件使用。

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

在您的 nuxt.config 中

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

视图

Nuxt 提供了多个组件层来实现应用程序的用户界面。

样式

了解如何为您的 Nuxt 应用程序设置样式。