Nuxt 菜鸟入门学习笔记四：静态资源-Javascript前端- WEB程序开发笔记

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

原创
作者：phpEcho
发布时间：2023-08-29 00:30
标签： Nuxt SSR 服务端渲染
浏览量：524

本文内容由 Nuxt 官网翻译而来，主要介绍了 Nuxt 静态资源部分。

[TOC]

![Nuxt](https://cnd.51blog.xyz/images/nuxt-logo.png)
Nuxt 官网地址：[https://nuxt.com/](https://nuxt.com/)

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

# public 目录

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

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

应用：

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

```vue
<template>
  
  <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/ 目录中的文件。

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

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

```css
// assets/scss/_colors.scss

$primary: blue;
$secondary: lightblue;
```

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

```typescript
// nuxt.config.ts

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

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

```vue
// 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>

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

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

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

WEB程序开发笔记

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

文章归档

推荐文章

热门标签

友情链接