Nuxt快速学习开发 - Nuxt3静态资源Assets

Nuxt 使用两个目录来处理样式表、字体或图像等资产。

public/目录内容按原样在服务器根目录中提供。
assets/目录包含您希望构建工具(Vite 或 webpack)处理的所有资产。

public/目录
public目录用作静态资产的公共服务器,可在您的应用程序定义的URL上公开访问。
public/您可以从您的应用程序代码或通过根 URL 从浏览器中获取目录中的文件/。
例如,引用public/img/目录中的图像文件,可在静态 URL 获得/img/nuxt.png:

在这里插入图片描述

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

assets/目录

Nuxt 使用Vite或webpack来构建和捆绑您的应用程序。这些构建工具的主要功能是处理 JavaScript 文件,但它们可以通过插件(对于 Vite)或加载器(对于 webpack)进行扩展,以处理其他类型的资产,如样式表、字体或 SVG。此步骤主要出于性能或缓存目的(例如样式表缩小或浏览器缓存失效)转换原始文件。
Nuxt 使用该assets/目录来存储这些文件,但该目录没有自动扫描功能,可以为它使用任何其他名称。
例如,如果构建工具配置为处理此文件扩展名,则引用将被处理的图像文件:

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

可以通过配置nuxt.config.ts配置别名,以便更好的访问资源,例:

//``nuxt.config.ts
export default defineNuxtConfig({alias: {//配置别名images: fileURLToPath(new URL("./assets/img", import.meta.url)),style: fileURLToPath(new URL("./assets/style", import.meta.url)),data: fileURLToPath(new URL("./assets/other", import.meta.url)),},)}
//app.vue
<template> <div> <img src="~/img/nuxt.png" /> </div> </template>

全局样式导入

要在 Nuxt 组件样式中全局插入语句,需要再nuxt.config.ts中配置vite选项 资产/_colors.scss资产/_colors.sass

assets/_colors.scss

$primary: #49240F;
$secondary: #E4A79D;
//``nuxt.config.ts
export default defineNuxtConfig({vite: {css: {preprocessorOptions: {sass: {additionalData: '@use "@/assets/_colors.scss" as *;'}}}}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/854720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode 128】 最长连续子序列

判断前一位数在不在字典中是这道题的关键之处&#xff0c;这样就可以避免重复查找&#xff0c;从而达到O(n) 的时间复杂度。如果没有这个判断&#xff0c;那么时间复杂度最坏也得是O(N^2)级别的。 1. 题目 2. 分析 合理利用数据结构。本题中使用了set来保存数组的元素&#x…

氮化铝上的厚膜高功率片式电阻器

EAK厚膜高功率片式电阻器和氮化铝片式端接非常适合大多数需要在小尺寸封装中实现高导热性的应用。AlN 是 BeO 的理想替代品&#xff0c;具有高功耗且对环境或健康无危害。厚膜技术以非常实惠的价格提供稳定的电阻元件。 高稳定性厚膜电阻元件 AlN衬底材料 标准电阻范围为 10Ω…

5216万!国内自动化巨头,拟剥离旗下子业务

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 近日&#xff0c;中控技术发布公告称&#xff0c;为进一步优化资产结构和产业布局&#xff0c;提升公司核心竞争力&#xff0c;公司拟将其全资子…

多模态LLM 跨越语言与视觉的边界

一、引言 在数字时代的浪潮中&#xff0c;我们被由语言和视觉等多种模态构成的信息海洋所包围。人类大脑以其卓越的多模态上下文理解能力&#xff0c;在日常任务中游刃有余。然而&#xff0c;在人工智能领域&#xff0c;如何将这种能力赋予机器&#xff0c;尤其是如何在语言模…

计算子网掩码

例题 如果子网掩码是255.255.192.0&#xff0c; 那么下面主机&#xff08;&#xff09;必须通过路由器才能与主机129.23.144.16通信&#xff08; 1分 &#xff09;A.129.23.148.127B. 129.23.191.21C. 129.23.127.222D. 129.23.130.33计算 要确定哪些主机必须通过路由器才能与…

MybatisPlus:高效便捷的Java持久层框架

一、MybatisPlus简介 MybatisPlus&#xff08;简称MP&#xff09;是一个流行的Java持久层框架&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生&#xff0c;旨在简化数据库操作和提高开发效率。MybatisPlus为开发者提供了一套方便的API和…

运维开发详解:从入门到精通

运维开发&#xff08;DevOps&#xff09;是一种整合开发与运维的实践&#xff0c;旨在通过自动化和持续交付提高软件开发和部署的效率。本文将详细介绍运维开发的概念、核心工具和最佳实践&#xff0c;帮助您从入门到精通。 一、运维开发的概念 1. 什么是运维开发&#xff1f…

About Apple Pay

本文翻译整理自&#xff1a;About Apple Pay &#xff08;更新时间&#xff1a;2017-03-16&#xff09; https://developer.apple.com/library/archive/ApplePay_Guide/index.html#//apple_ref/doc/uid/TP40014764 文章目录 一、关于 Apple Pay1、使用 Apple Pay2、测试 Apple …

k8s核心组件

Master组件&#xff1a; kube-apiserver&#xff1a;用于暴露Kubernetes API&#xff0c;任何资源请求或调用操作都是通过kube-apiserver提供的接口进行。它是Kubernetes集群架构的大脑&#xff0c;负责接收所有请求&#xff0c;并根据用户的具体请求通知其他组件工作。etcd&am…

SpringBoot3整合SpringDoc实现在线接口文档

写在前面 在现目前项目开发中&#xff0c;一般都是前后端分离项目。前端小姐姐负责开发前端&#xff0c;苦逼的我们负责后端开发 事实是一个人全干&#xff0c;在这过程中编写接口文档就显得尤为重要了。然而作为一个程序员&#xff0c;最怕的莫过于自己写文档和别人不写文档…

找工作小项目:day16-重构核心库、使用智能指针(3)

day16-重构核心库、使用智能指针&#xff08;3&#xff09; 最后将使用这个库的方式进行展示。 1、客户端 在while ((o getopt(argc, argv, optstring)) ! -1)所有的操作都是获取参数的操作&#xff0c;threads 、msgs 和wait 分别指线程数、消息长度以及等待时间。 创建一…

【数据结构(邓俊辉)学习笔记】二叉搜索树02——查找、插入和删除

文章目录 1.概述2. 查找2.1 查找&#xff1a;算法2.2 查找&#xff1a;理解2.3 查找&#xff1a;实现2.4 查找&#xff1a;语义 3. 插入3.1 插入&#xff1a;算法3.2 插入&#xff1a;实现 4. 删除4.1 删除&#xff1a;框架4.2 删除&#xff1a;单分支4.3 删除&#xff1a;双分…

Pyqt QCustomPlot 简介、安装与实用代码示例(一)

目录 简介安装实用代码示例带有填充的简单衰减正弦函数及其红色的指数包络线具有数据点的 sinc 函数、相应的误差条和 2--sigma 置信带几种散点样式的演示展示 QCustomPlot 在设计绘图方面的多功能性 结语 所有文章除特别声明外&#xff0c;均采用 CC BY-NC-SA 4.0 许可协议。转…

RERCS系统开发实战案例-Part05 FPM Application的Feeder Class搜索组件的实施

1、通过事务码 SE24对Feeder Class实施 1&#xff09;接口页签的简单说明&#xff1a; ① IF_FPM_GUIBB&#xff1a;通用UI构建块&#xff0c;整个UIBB模块的基础接口&#xff1b; ② IF_FPM_GUIBB_SEARCH&#xff1a;通用搜索UI构建块&#xff0c;搜索组件UIBB的基础接口&…

期末复习GGG-----查找子串

郭的 char *search( char *s, char *t ){int i0;while(s[i]){int j0;if(s[i]t[0]){while(s[ij]t[j]&&t[j]){j;}if(t[j]\0)return si;}i;}return NULL; } AI的 #include <stdio.h> #include <string.h> #define MAXS 30char *search(char *s, char *t);in…

React项目-Cesium地图初始化

一、环境描述 React集成Cesium地图需要注意软件兼容性问题&#xff0c;可以从官网或者百度文章查询React和Cesium地图的版本兼容性&#xff0c; 1、软件版本 &#xff08;1&#xff09;create-react-app创建项目&#xff1b; &#xff08;2&#xff09;React版本&#xff1a;1…

ctfshow web七夕杯

web签到 执行命令没有回显&#xff0c;我们直接写文件就可以了 有字符长度限制 ls />a nl /*>a访问url/api/a下载文件 easy_calc <?phpif(check($code)){eval($result."$code".";");echo($result); }function check(&$code){$num1…

Golang | Leetcode Golang题解之第164题最大间距

题目&#xff1a; 题解&#xff1a; type pair struct{ min, max int }func maximumGap(nums []int) (ans int) {n : len(nums)if n < 2 {return}minVal : min(nums...)maxVal : max(nums...)d : max(1, (maxVal-minVal)/(n-1))bucketSize : (maxVal-minVal)/d 1// 存储 (…

aasist-bladedisc 音频反欺骗算法模型

AASIST 论文 参考ASIST: Audio Anti-Spoofing using Integrated Spectro-Temporal Graph Attention Networks https://arxiv.org/pdf/2110.01200.pdf 模型结构 aasist是一种开源的音频反欺诈的模型&#xff0c;主要的模型结构如下所示&#xff1a; 算法原理 环境配置 Dock…

git配置1-不同的项目使用不同用户名或邮箱

1. 全局用户名和邮箱 1.1. 设置1.2. 存储1.3. 查看 2. 针对指定项目单独设置 2.1. 设置2.2. 存储2.3. 查看 1. 全局用户名和邮箱 1.1. 设置 git config --global user.name 张三 git config --global user.email zhangsanexample.com1.2. 存储 git的全局配置一般会存在hom…