当前位置： 首页 > news >正文

vue中打包dist文件内static 和 assets 的区别

news 来源：原创 2025/6/20 9:35:17

背景

在Vue.js项目中，assets 和 static 是两个用于存放静态资源的文件夹，但它们在使用方式和处理机制上有所不同

用途

assets:

  • assets 文件夹通常用于存放那些需要在构建过程中被Webpack处理的静态资源。
  • 这些资源可以包括图片、字体、样式文件（如CSS、SCSS等）以及JavaScript文件。

static:

  • static 文件夹用于存放那些不需要经过Webpack处理的静态资源。
  • 这些资源通常包括一些第三方库、图片、视频等，它们不需要被Webpack进行任何转换或打包。

机制

assets：

  • Vue CLI在构建项目时，会将这些资源作为模块来处理。
  • 对于图片和字体等资源，Webpack会进行URL解析和路径重写，确保在最终打包后的文件中，资源的路径是正确的。
  • 对于样式文件，Webpack会使用相应的loader（如css-loader、sass-loader等）进行解析和转换。
  • 在模板或组件中引用assets中的资源时，可以使用相对路径，Webpack会自动处理这些路径。

static：

  • 在构建过程中，static 文件夹中的内容会被直接复制到最终打包的dist目录中，而不会经过Webpack的任何处理。
  • 因此，static 文件夹中的资源路径是相对于dist目录的。

引用方式

assets:

  • 在Vue组件中，可以通过相对路径来引用assets中的资源。例如，如果有一张图片位于src/assets/images/logo.png，则可以在组件中这样引用：<img src="@/assets/images/logo.png" alt="Logo">。注意，@符号是Vue CLI配置中的一个别名，默认指向src目录。

static：

  • 在引用static文件夹中的资源时，需要使用绝对路径（相对于dist目录的路径）或者通过根路径（/）来引用。例如，如果有一张图片位于public/static/images/background.png，则可以在HTML或CSS中这样引用：<img src="/static/images/background.png" alt="Background">。

场景选择

  • assets：用于存放需要在构建过程中被Webpack处理的资源，如图片、字体、样式文件等。这些资源在引用时可以使用相对路径，并且Webpack会自动处理这些路径。
  • static：用于存放不需要经过Webpack处理的静态资源，如第三方库、图片、视频等。这些资源在引用时需要使用绝对路径或根路径。

注:选择使用哪个文件夹取决于资源的具体需求和是否需要进行构建处理。如果资源需要在构建过程中被处理（如图片压缩、CSS预处理等），则应该放在assets文件夹中；如果资源不需要任何处理，则可以直接放在static文件夹中。

相关文章：

vue中打包dist文件内static 和 assets 的区别

背景 在Vue.js项目中&#xff0c;assets 和 static 是两个用于存放静态资源的文件夹&#xff0c;但它们在使用方式和处理机制上有所不同 用途 assets: assets 文件夹通常用于存放那些需要在构建过程中被Webpack处理的静态资源。这些资源可以包括图片、字体、样式文件&#…...

编程日记 2025/6/20 9:35:17

Big Model weekly | 第49期

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 01 Magnetic Preference Optimization: Achieving Last-iterate Convergence for Language Models Alignment 自我对弈方法在多个领域增强模型能力方面展现出了显著的成功。在基于人类反馈的强化学习&#xff0…...

编程日记 2025/6/20 15:36:34

Node.js内置模块

1.内置模块 Node.js的中文网参考手册：https://nodejs.cn//api 帮助文档 API文档：查看对应的模块，左边是模块，右边是模块的成员 源码：https://github.com/nodejs/node/tree/main/lib 查看 例如: http.js 创建web服务器的模块 -->进入源码中，搜索…...

编程日记 2025/6/3 3:58:34

使用Nexus3搭建npm私有仓库

一、npm介绍 npm的全称是Node Package Manager&#xff0c;它是一个开放源代码的命令行工具&#xff0c;用于安装、更新和管理Node.js模块。npm是Node.js的官方模块管理器&#xff0c;它允许用户从一个集中的仓库中下载和安装公共的Node.js模块&#xff0c;并将这些模块集成到…...

编程日记 2025/6/3 19:24:56

MySQL学习之表操作

MySQL学习之表操作 基础命令 查询当前所在数据库的所有表 show tables;查看指定的表结构, 可以查看到指定表的字段&#xff0c;字段的类型、是否可以为NULL&#xff0c;是否存在默认值等信息 mysql> desc user; ----------------------------------------------- | Field |…...

编程日记 2025/6/20 16:09:33

C语言学习day22：ReadProcessMemory函数/游戏内存数据读取工具开发

简言&#xff1a; ReadProcessMemory函数是 Windows API 中的一个函数&#xff0c;用于从目标进程的虚拟内存空间中读取数据。这个函数非常有用&#xff0c;尤其是在进行内存分析、调试、或某些类型的逆向工程时。 ReadProcessMemory函数 函数原型 BOOL ReadProcessMemory(…...

编程日记 2025/6/20 16:07:57

Linux虚拟文件系统

参考&#xff1a;深入分析LINUX内核源码 深入分析Linux内核源码 (kerneltravel.net) 作为一个最著名的自由软件&#xff0c;Linux 确实名不虚传&#xff0c;几乎处处体现了“自由”&#xff0c;你可以编译适合自己系统要求的内核&#xff0c;或者轻松添加别人开发的新的模块。只…...

编程日记 2025/6/19 19:20:26

OpenIPC开源FPV之Adaptive-Link天空端代码解析

OpenIPC开源FPV之Adaptive-Link天空端代码解析 1. 源由2. 框架代码3. 报文处理3.1 special报文3.2 普通报文 4. 工作流程4.1 Profile 竞选4.2 Profile 研判4.3 Profile 应用 5. 总结6. 参考资料7. 补充资料7.1 RSSI 和 SNR 的物理含义7.2 信号质量加权的理论依据7.3 实际应用中…...

编程日记 2025/6/3 8:33:29

NPU是什么？电脑NPU和CPU、GPU区别介绍

随着人工智能技术的飞速发展&#xff0c;计算机硬件架构也在不断演进以适应日益复杂的AI应用场景。其中&#xff0c;NPU&#xff08;Neural Processing Unit&#xff0c;神经网络处理器&#xff09;作为一种专为深度学习和神经网络运算设计的新型处理器&#xff0c;正逐渐崭露头…...

编程日记 2025/6/19 20:22:25

.Net WebAPI（一）

文章目录 项目地址一、WebAPI基础1. 项目初始化1.1 创建简单的API1.1.1 get请求1.1.2 post请求1.1.3 put请求1.1.4 Delete请求 1.2 webapi的流程 2.Controllers2.1 创建一个shirts的Controller 3. Routing3.1 使用和创建MapControllers3.2 使用Routing的模板语言 4. Mould Bind…...

编程日记 2025/6/1 15:45:50

.NET 技术 | 调用系统API创建Windows服务

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…...

编程日记 2025/5/30 8:42:49

OpenLinkSaas 2025年1月开发计划

先来看看OpenLinkSaas的大目标 在OpenLinkSaas的产品目标中&#xff0c;让开发人员更加方便的使用云资源是目标之一。通过各大云厂商的API&#xff0c;来可视化云上基础设施的数据是远远不够的。我们准备在2025年1月份增加方便管理和运营研发场景下服务器的能力。 这部分的功能…...

编程日记 2025/6/4 16:30:59

同态加密算法详解及Python实现

目录 同态加密算法详解及Python实现第一部分：同态加密概述与原理1.1 什么是同态加密？同态加密的定义：1.2 同态加密的分类1.3 同态加密的优势与挑战优势挑战第二部分：常见同态加密算法及其应用场景2.1 RSA同态加密支持操作应用场景2.2 Paillier加密支持操作应用场景2.3 Gent…...

编程日记 2025/6/3 23:45:25

【HarmonyOS NEXT】ArkTs函数、类、接口、泛型、装饰器解析与使用

1. 前置学习文档 【HarmonyOS NEXT】ArkTs数据类型解析与使用(https://juejin.cn/spost/7448894500348608522) 2. 前言 在原生JavaScript中只有函数和类的实现&#xff0c;为了更好的面向对象编程&#xff0c;TypeScript 引入了接口、泛型、装饰器等特性。ArkTS也继承了这些特性…...

编程日记 2025/6/2 17:43:09

【数学】矩阵的逆与伪逆 EEGLAB

文章目录 前言matlab代码作用EEGLAB 中的代码总结参考文献 前言 在 EEGLAB 的使用中&#xff0c;运行程序时出现了矩阵接近奇异值&#xff0c;或者缩放错误。结果可能不准确。RCOND 1.873732e-20 的 bug&#xff0c;调查 EEGLAB 后发现是 raw 数据的问题。 matlab代码 A_1 …...

编程日记 2025/6/19 19:54:34

用github镜像加速， --recursive还是去github站怎么处理？

小伙伴们大多碰到过github抽风的情况&#xff0c;时通时断&#xff0c;时快时慢&#xff0c;非常考验心情。 以前碰到连不上的时候&#xff0c;我大多就是在gitee和gitcode网站找一下镜像&#xff0c;找到后直接git clone 新地址即可。但是碰到 --recursive的时候就不行了&…...

编程日记 2025/6/4 7:27:42

第P2周：Pytorch实现CIFAR10彩色图片识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标 实现CIFAR-10的彩色图片识别实现比P1周更复杂一点的CNN网络 具体实现 &#xff08;一&#xff09;环境 语言环境&#xff1a;Python 3.10 编 译 器: …...

编程日记 2025/6/3 8:34:43

springboot3访问第三方接口

添加依赖&#xff08;如果尚未添加&#xff09; 在pom.xml文件中&#xff0c;确保已经包含spring-boot-starter-web依赖&#xff0c;因为RestTemplate通常在这个依赖范围内。如果没有&#xff0c;添加如下依赖&#xff1a; <dependency><groupId>org.springframe…...

编程日记 2025/6/19 20:53:47

Ubuntu K8s

https://serious-lose.notion.site/Ubuntu-K8s-d8d6a978ad784c1baa2fc8c531fbce68?pvs74 2 核 2G Ubuntu 20.4 IP 172.24.53.10 kubeadmkubeletkubectl版本1.23.01.23.01.23.0 kubeadm、kubelet 和 kubectl 是 Kubernetes 生态系统中的三个重要组件 kubeadm&#xff1a; 主…...

编程日记 2025/6/20 11:23:21

大数据第三次周赛

类斐波那契循环数 #include<bits/stdc.h> using namespace std; #define int long long int arr[1000010]; bool key(int k){int num0;string strto_string(k);for(int i0;i<str.length();i){arr[num]str[i]-0;}int l0,rnum-1;int shix0; while(shix<k){shix0;for…...

编程日记 2025/6/3 17:49:40

《Java核心技术I》Swing用户界面组件

Swing和模型-视图-控制器设计模式 用户界面组件各个组成部分&#xff0c;如按钮&#xff0c;复选框&#xff0c;文本框或复杂的树控件&#xff0c;每个组件都有三个特征&#xff1a; 内容&#xff0c;如按钮的状态&#xff0c;文本域中的文本。外观&#xff0c;颜色&#xff0c…...

编程日记 2025/6/4 1:52:44

Web开发 -前端部分-CSS

CSS CSS&#xff08;Cascading Style Sheet&#xff09;:层叠样式表&#xff0c;用于控制页面的样式&#xff08;表现&#xff09;。 一 基础知识 1 标题格式 标题格式一&#xff1a; 行内样式 <!DOCTYPE html> <html lang"en"><head><meta…...

编程日记 2025/6/3 2:45:44

旅游系统旅游小程序PHP+Uniapp

旅游门票预订系统&#xff0c;支持景点门票、导游产品便捷预订、美食打卡、景点分享、旅游笔记分享等综合系统 更新日志 V1.3.0 1、修复富文本标签 2、新增景点入驻【高级版本】3、新增门票核销【高级版】4、新增门票端口【高级版】...

编程日记 2025/5/24 6:16:04

Windows 与 Linux 下 Ping IPv6 地址 | 常用网络命令

注&#xff1a;本文为网络命令相关文章合辑。 未整理去重。 一、IPv6 概述 IPv6 即 “Internet 协议版本 6”&#xff0c;因 IPv4 地址资源面临耗尽问题而被引入以替代 IPv4。IPv6 则提供了理论上多达 2 128 2^{128} 2128 个地址&#xff0c;有效解决地址不足困境。 IPv6 具…...

编程日记 2025/5/30 15:13:46

前端学习一

一 进程与线程 线程是进程执行的最小单位&#xff0c;进程是系统分配任务的最小单位。 一个进程可执行最少一个线程。线程分为子线程和主线程。 主线程关闭则子线程关闭。 二 浏览器进程 浏览器是多进程多线程应用。 进程包括&#xff1a; 浏览器进程 负责程序交互渲染…...

编程日记 2025/6/3 4:30:45

【Python · PyTorch】卷积神经网络（基础概念）

【Python PyTorch】卷积神经网络 CNN&#xff08;基础概念&#xff09; 0. 生物学相似性1. 概念1.1 定义1.2 优势1.2.1 权重共享1.2.2 局部连接1.2.3 层次结构 1.3 结构1.4 数据预处理1.4.1 标签编码① One-Hot编码 / 独热编码② Word Embedding / 词嵌入 1.4.2 归一化① Min-…...

编程日记 2025/6/19 20:53:48

Spring Framework 路径遍历漏洞复现（CVE-2024-38819）

hu0x01 产品描述： Spring Framework 是一个功能强大的 Java 应用程序框架，旨在提供高效且可扩展的开发环境。它结合了轻量级的容器和依赖注入功能，提供了一种使用 POJO 进行容器配置和面向切面的编程的简单方法，以及一组用于AOP的模块。0x02 漏洞描述： Spring Framework 存…...

编程日记 2025/6/20 10:37:31

心法利器[122] | 算法面试的八股和非八股讨论

心法利器 本栏目主要和大家一起讨论近期自己学习的心得和体会。具体介绍&#xff1a;仓颉专项&#xff1a;飞机大炮我都会&#xff0c;利器心法我还有。 2023年新的文章合集已经发布&#xff0c;获取方式看这里&#xff1a;又添十万字-CS的陋室2023年文章合集来袭&#xff0c;更…...

编程日记 2025/5/29 22:40:26

实操给自助触摸一体机接入大模型语音交互

本文以CSK6 大模型开发板串口触摸屏为例&#xff0c;实操讲解触摸一体机怎样快速增加大模型语音交互功能&#xff0c;使用户能够通过语音在一体机上查询信息、获取智能回答及实现更多互动功能等。 在本文方案中通过CSK6大模型语音开发板采集用户语音&#xff0c;将语音数据传输…...

编程日记 2025/6/4 2:33:29

AJAX家政系统自营+多商家家政系统服务小程序PHP+Uniapp

一款同城预约、上门服务、到店核销家政系统&#xff0c;用户端、服务端、门店端各端相互依赖又相互独立&#xff0c;支持选择项目、选择服务人员、选择门店多种下单方式&#xff0c;支持上门服务和到店核销两种服务方式&#xff0c;支持自营和多商家联营两种运营模式&#xff0…...

编程日记 2025/5/29 14:53:10

LiveData源码研究

LiveData 源码分析 前言 用过MVVM的大概知道LiveData可以感知组件的生命周期&#xff0c;当页面活跃时&#xff0c;更新页面数据&#xff0c; 当页面处于非活跃状态&#xff0c;它又会暂停更新&#xff0c;还能自动注册和注销观测者&#xff0c;能有效避免内存泄漏和不必要的…...

编程日记 2025/6/19 22:28:39

Root软件学习

一、命令行输入下方命令打开root文件 root filename.root 二、在root命令行下输入.help查看root下可用的指令 .help输入.q是退出root命令行 .q 三、输入下方指令查看当前打开的root文件的目录 .ls 四、打印Hits树下的内容&#xff08;print&#xff09; 方框里是各种树文…...

编程日记 2025/5/28 3:46:26

研发文档管理系统：国内外9大选择比较

文章主要对比了9款国内外研发文档管理系统&#xff1a;1.PingCode&#xff1b; 2. Worktile&#xff1b; 3. 飞书&#xff1b; 4. 石墨文档&#xff1b; 5. 腾讯文档&#xff1b; 6. 蓝湖&#xff1b; 7. Confluence&#xff1b; 8. Notion&#xff1b; 9. Slab。 在企业研发过…...

编程日记 2025/5/31 10:57:54

centos 7.9 freeswitch1.10.9环境搭建

亲测版本centos 7.9系统–》 freeswitch1.10.9 一、下载插件 yum install -y git alsa-lib-devel autoconf automake bison broadvoice-devel bzip2 curl-devel libdb4-devel e2fsprogs-devel erlang flite-devel g722_1-devel gcc-c++ gdbm-devel gnutls-devel ilbc2...

编程日记 2025/6/4 6:40:09

嵌入式驱动开发详解17（CAN驱动开发）

文章目录 前言CAN简介CAN收发器CAN协议讲解电气特性传输协议数据帧遥控帧错误帧过载帧帧间隔 同步矫正 CAN控制器CAN控制器模式CAN接收器CAN波特率 CAN设备树分析CAN测试后续参考文献 前言 该专栏主要是讲解嵌入式相关的驱动开发&#xff0c;但是由于部分模块的驱动框架过于复…...

编程日记 2025/6/20 11:23:18

探索 Janus-1.3B：一个统一的 Any-to-Any 多模态理解与生成模型

随着多模态技术的不断发展&#xff0c;越来越多的模型被提出以解决跨文本与图像等多种数据类型的任务。Janus-1.3B 是由 DeepSeek 推出的一个革命性的模型&#xff0c;它通过解耦视觉编码并采用统一的 Transformer 架构&#xff0c;带来了一个高度灵活的 any-to-any 多模态框架…...

编程日记 2025/5/30 4:50:48

黑马头条day01 微服务搭建

1.请求调用流程 如http://localhost:8803/static/js/2.0195d7180dc783c3fe99.js这种静态资源&#xff0c;采用http的发送到本地8803端口的静态资源请求&#xff0c;而nginx配置的监听8801、8802、8803&#xff0c;所以请求走到nginx&#xff0c;nginx的admin配置文件 upstream…...

编程日记 2025/6/2 6:00:19

AI辅助编程工具对比：Cursor AI、Windsurf AI 和 GitHub Copilot

功能和特性 1. Cursor AI 基于VS Code构建&#xff0c;集成了GPT-4等多个AI模型&#xff0c;提供高级智能支持。支持AI代码补全、错误修正以及通过自然语言执行命令。具备多文件编辑和上下文理解能力&#xff0c;能够在复杂项目中提供跨文件的智能建议。提供标签功能&#xf…...

编程日记 2025/6/4 8:29:52

【Qt】qt安装

在工作一年之后&#xff0c;还是想做一个Qt的教程&#xff0c;遥想研一刚刚接触Qt&#xff0c;从0到1学习&#xff0c;没有什么参考书籍&#xff0c;网上的资料也不多&#xff0c;幸好Qt官方文档写得好&#xff0c;加上自己肯研究&#xff0c;才堪堪入门。 现在我想自己写一个…...

编程日记 2025/5/28 6:03:01

课设项目十：智能手电筒（使用金沙滩51单片机）

00 题目介绍 功能&#xff1a; 硬件设置&#xff1a; 使用51单片机连接光敏传感器、LED灯和手电筒开关按钮。 环境感知&#xff1a; 实时监测周围光照强度。 LED控制&#xff1a; 根据光照强度自动控制LED灯的开关。 手动控制&#xff1a; 提供手电筒开关按钮&#xff0c;…...

编程日记 2025/6/4 6:58:47

Oracle中COUNT函数对NULL和空字符串的处理方式

Oracle中&#xff0c;使用COUNT函数的时候&#xff0c;COUNT()和COUNT(null)得到的结果都是0&#xff0c;也就是说&#xff0c;如果我们COUNT中选择的那列属性中为null的或者的那行是不会被计数的。MySQL中count(null)效果和Oracle中一样&#xff0c;但是count()能正常计数。 在…...

编程日记 2025/5/29 22:38:02

OpenHarmony和OpenVela的技术创新以及两者对比

两款有名的国内开源操作系统&#xff0c;OpenHarmony&#xff0c;OpenVela都非常的优秀。本文对二者的创新进行一个简要的介绍和对比。 一、OpenHarmony OpenHarmony具有诸多有特点的技术突破和重要贡献&#xff0c;以下是一些主要方面&#xff1a; 架构设计创新 分层架构…...

编程日记 2025/6/2 6:00:10

Windows常用命令

该篇文章是博主不断从工作中总结而来&#xff0c;会持续不断更新 文件和目录管理命令 列出指定目录中的文件和子目录&#xff1a;dir 路径 更改当前工作目录&#xff1a;cd 路径 创建新目录&#xff1a;mkdir 目录名 删除空目录&#xff1a;rmdir 目录名 删除指定文件&#xf…...

编程日记 2025/5/30 10:57:05

牛客网 SQL2查询多列

SQL2查询多列 select device_id,gender,age,university //查询哪些字段 from user_profile //从哪个表中查找 每日问题 C 中面向对象编程如何处理异常&#xff1f; 在C中&#xff0c;面向对象编程&#xff08;OOP&#xff09;处理异常主要通过异常处理机制来实现。C 提供了…...

编程日记 2025/6/2 6:00:05

容器，网络基础

小结&#xff1a; 1、利用网桥和虚拟网卡 2、利用Veth Pair虚拟设备&#xff0c;一个网卡可以直接出现在另外一个网卡中 一个Linux容器能看见的“网络栈”&#xff0c;实际上是被隔离在它自己的Network Namespace当中的 “网络栈”&#xff0c;就包括了&#xff1a;网卡&#…...

编程日记 2025/6/2 6:00:00

Treap树堆【东北大学oj数据结构8-4】C++

题面 二叉搜索树会因为插入的数据的值可能变得不平衡&#xff0c;搜索/插入/删除操作的效率变得低效。例如&#xff0c;如果依次插入 n 个升序的数据&#xff0c;则树将看起来像一个列表&#xff0c;其高度将为 n&#xff0c;并且查询时间变得很长。一个解决策略是随意打乱要插…...

编程日记 2025/6/1 18:06:52

基于STM32的智电表系统课题设计思路：python友好界面、ADC、UART串口、数据分析

1. 项目选题与需求分析 1.1 选题背景和动机 随着社会的快速发展&#xff0c;电力的消耗不断增加&#xff0c;如何高效管理和监测用电成为了一个重要的课题。传统的电表只能提供简单的用电计量&#xff0c;无法满足现代家庭和工业对用电数据实时监控、远程控制及数据分析的需求…...

编程日记 2025/6/20 1:48:26

博弈论1：拿走游戏（take-away game）

假设你和小红打赌&#xff0c;玩“拿走游戏”&#xff0c;输的人请对方吃饭.... 你们面前有21个筹码&#xff0c;放成一堆&#xff1b;每轮你或者小红可以从筹码堆中拿走1个/2个/3个&#xff1b;第一轮你先拿&#xff0c;第二轮小红拿&#xff0c;你们两个人交替进行;拿走筹码堆…...

编程日记 2025/6/4 7:22:45

【人工智能解读】神经网络（CNN）的特点及其应用场景器学习（Machine Learning, ML）的基本概念

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c; 忍不住分享一下给大家。点击跳转到网站 学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把…...

编程日记 2025/6/1 17:52:05

Spring Cloud与Spring Cloud Alibaba：全面解析与核心要点

Spring Cloud与Spring Cloud Alibaba&#xff1a;全面解析与核心要点 一、引言 在当今的分布式系统开发领域&#xff0c;Spring Cloud和Spring Cloud Alibaba都是极为重要的框架。它们为构建大规模、高可用、分布式的应用系统提供了丰富的工具和组件。本文将深入探讨Spring C…...

编程日记 2025/5/31 7:04:57