Nuxt3入门:资源文件(第2节)

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

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

html 复制代码
<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

html 复制代码
<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

bash 复制代码
npm install sass

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

css 复制代码
$primary: blue;
$secondary: red;

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

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

第 4 步:组件使用 app.vue

html 复制代码
<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>

好了,分享结束,谢谢点赞,下期再见!

相关推荐
恋猫de小郭3 分钟前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v21 分钟前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍22 分钟前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲34 分钟前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_2 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒2 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
岛风风3 小时前
关于手机的设备信息
前端
ReturnTrue8683 小时前
nginx性能优化之Gzip
前端
w_y_fan3 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇4 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端