当前位置：首页 > article >正文

Nuxt3入门：资源文件（第2节）

article 2024/9/21 5:30:23

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。

Nuxt 为资源存放提供两种选择。可以使用两个目录（public/assets）来处理样式表、字体或图像等资源。

public/ 此目录中的文件将按原样复制到服务器根目录中。
assets/ 此目录中的文件将使用构建工具（Vite 或 webpack）进行处理。

public

位置：位于项目的根目录下，通常与 pages、components 等目录并列。
用途：用于存放完全静态的资源，如图片、字体、JS 文件（这些文件不会通过 webpack 处理）、.html 文件等。这些资源将直接映射到项目的根 URL 下。
访问方式：可以直接通过 /资源名的形式访问 public 目录下的资源，而无需经过 webpack 处理。
注意：public 目录下的资源是静态的，不会进行打包、压缩等 webpack 处理，使用时需要自行考虑资源优化和缓存问题。

例如引用 public/ 目录中的文件"public/img/nuxt.png"

app.vue

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

浏览器中直接访问：http://localhost:3000/img/nuxt.png

assets

位置：在 Nuxt3 中，assets 目录的位置也是位于根目录，与 pages、components 等目录并列。
用途：用于存放需要在构建过程中被 webpack 处理的资源，如 Vue 组件中的样式文件（CSS、SCSS、Less 等）、图片等。这些资源可以通过 webpack 的 loader 进行转换和压缩，优化前端资源。
访问方式：可以通过 ~/assets/ 访问 assets 目录下的资源，以确保它们能被 webpack 正确处理。
注意点：因为 assets 目录下的资源会经过 webpack 处理，所以可以利用 webpack 的各种 loader 和插件进行资源优化。

app.vue

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

注意，不能在浏览器中直接访问 assets 中的静态资源，如 http://localhost:3000/img/nuxt2.png。

全局导入样式

要在 Nuxt 组件样式中全局插入语句，可以使用 Vite 选项在 nuxt.config 文件中进行配置。以定义 scss 变量为例：

第 1 步：安装依赖 sass

npm install sass

第 2 步：定义变量 assets/_colors.scss

$primary: blue;
$secondary: red;

第 3 步：全局注册 nuxt.config.js

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

第 4 步：组件使用 app.vue

<template>
  <div class="wrap">
    <img src="~/assets/img/nuxt2.png" alt="Discover Nuxt 3" />
    <p>Hello Nuxt3</p>
  </div>
</template>

<style lang="scss">
  .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    color: $primary;
  }
</style>