文章目录
- public 目录
- assets 目录
- 全局样式导入
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 选项。
应用代码如下：
- 在 assets/scss 目录下创建一个 _colors.scss 文件，来定义页面和组件要统一使用的颜色:
// assets/scss/_colors.scss
$primary: blue;
$secondary: lightblue;
- 在 nuxt.config 中进行配置：
// nuxt.config.ts
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/_colors.scss" as *;',
},
},
},
},
});
- 在 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 中样式设计和使用，将会在下个章节会做进一步详细介绍。
