河北大型网站建设十大下载网站免费安装
你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。
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>
好了，分享结束，谢谢点赞，下期再见！