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
。文章来源:https://www.toymoban.com/news/detail-682061.html
至于更多在 Nuxt 中样式设计和使用,将会在下个章节会做进一步详细介绍。文章来源地址https://www.toymoban.com/news/detail-682061.html
到了这里,关于Nuxt 菜鸟入门学习笔记四:静态资源的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!