Nuxt 菜鸟入门学习笔记四：静态资源

Nuxt 官网地址：https://nuxt.com/

Nuxt 使用以下两个目录来处理 CSS、fonts 和图片等静态资源：

public 目录

public 目录用作静态资产的公共服务器，可通过应用程序定义的 URL 公开获取。
换言之，就是可以通过应用程序的代码或浏览器通过根 URL / 获取 public 目录中的文件。

public 目录下的内容将原样提供给服务器根目录。

应用：

• 在应用程序代码中，通过根 URL / 获取 public 目录中的文件：

<template>
  <!-- 在静态 URL /img/nuxt.png 上引用 public/img/ 目录中的图像文件： -->
  <img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

• 在浏览器中通过根 URL / 获取 public 目录中的文件：

可以在浏览器中地址栏输入 http://localhost:3000/img/nuxt-logo.png 访问 public/img/ 目录中的图像文件。

assets 目录

Nuxt 使用 Vite 或 webpack 来构建和捆绑应用程序。这些构建工具的主要功能是处理 JavaScript 文件，但也可以通过插件（Vite）或加载器（webpack）进行扩展，以处理其他类型的资产，如样式表、字体或 SVG。这一步主要出于性能或缓存目的（如样式表最小化或浏览器缓存失效）对原始文件进行转换。

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

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

<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 选项。
应用代码如下：

1. 在 assets/scss 目录下创建一个 _colors.scss 文件，来定义页面和组件要统一使用的颜色:

// assets/scss/_colors.scss

$primary: blue;
$secondary: lightblue;

1. 在 nuxt.config 中进行配置：

// nuxt.config.ts

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

1. 在 Nuxt 页面和组件中使用步骤 1 中定义的颜色：

// pages/about.vue

<template>
  <div>
    <h1>@ about page</h1>
    <AppAlert>AppAlert Component.</AppAlert>
    <div>
      <p class="primary-text">public 目录下的图片：</p>
      <img src="/img/avatar.jpg" style="height: 80px" />
    </div>
    <div>
      <p class="second-text">assets 目录下的图片：</p>
      <img src="~/assets/img/avatar.jpg" style="height: 80px" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.primary-text {
  // 此处使用全局样式
  color: $primary;
}

.second-text {
  // 此处使用全局样式
  color: $secondary;
}
</style>

注意：上面代码要正常运行，需要安装 SCSS 预处理器，安装命令为 pnpm add sass。

至于更多在 Nuxt 中样式设计和使用，将会在下个章节会做进一步详细介绍。