当前位置: 首页 > article >正文

npm webpack打包缓存 导致css引用地址未更新

问题如下:

测试环境配置:

  publicPath: '/chat/',

生产环境配置:

  publicPath: '/',

css中引用背景图片

background-image: url('@/assets/images/calendar/arrow-left.png');

先打包测试环境,观察打包后的css文件引用的背景图片地址

可以全局搜索/dist/assets字符串判断

在这里插入图片描述

再打包生产环境,观察打包后的css文件引用的背景图片地址
在这里插入图片描述

发现背景图片的地址并没有变为/dist/assets/**依然是/chat/dist/assets/**,最终生产包发布后出现背景图片异常的问题。

解决办法

此问题是因为打包缓存导致,在webpack配置中关闭缓存即可,虽然打包慢一点,但是确保包是没有问题的。
修改webpack.prod.config.js

注意区分开发环境和打包环境的配置文件,开发环境关闭缓存后热更新非常慢!!!

module.exports = {cache: false,// ...config
};

再次打包,即可正常。
在这里插入图片描述

相关文章:

npm webpack打包缓存 导致css引用地址未更新

问题如下: 测试环境配置: publicPath: /chat/,生产环境配置: publicPath: /,css中引用背景图片 background-image: url(/assets/images/calendar/arrow-left.png);先打包测试环境,观察打包后的css文件引用的背景图片地址 可以全…...

ollama导入huggingface下载的大模型并量化

1. 导入GGUF 类型的模型 1.1 先在huggingface 下载需要ollama部署的大模型 1.2 编写modelfile 在ollama 里面输入 ollama show --modelfile <你有的模型名称> eg: ollama show --modelfile qwen2.5:latest修改其中的from 路径为自己的模型下载路径 FROM /Users/lzx/A…...

Java 集合 Map Stream流

目录 集合遍历for each map案例 ​编辑 这种数组的遍历是【index】​编辑map排序【对象里重写compareTo​编辑map排序【匿名内部类lambda​编辑 stream流​编辑 ​编辑获取&#xff1a; map的键是set集合&#xff0c;获取方法map.keySet() map的值是collection 集合&…...

记录一下零零散散的的东西-ImageNet

ImageNet 是一个非常著名的大型图像识别数据集&#xff0c; 数据集基本信息 内容说明&#x1f4f8; 图像数量超过 1400万张图片&#xff08;包含各类子集&#xff09;&#x1f3f7;️ 类别数量常用的是 ImageNet-1K&#xff08;1000类&#xff09;&#x1f9d1;‍&#x1f3e…...

【网络安全实验】PKI(证书服务)配置实验

目录 一、PKI相关概念 1.1 定义与核心功能 1.2 PKI 系统的组成 1.证书颁发机构&#xff08;CA, Certificate Authority&#xff09; 2.注册机构&#xff08;RA, Registration Authority&#xff09; 3.数字证书 1.3 PKI 的功能 1.4 PKI认证体系&#xff1a; 工作流程 …...

【数据集】多视图文本数据集

多视图文本数据集指的是包含多个不同类型或来源的信息的文本数据集。不同视图可以来源于不同的数据模式&#xff08;如原始文本、元数据、网络结构等&#xff09;&#xff0c;或者不同的文本表示方法&#xff08;如 TF-IDF、词嵌入、主题分布等&#xff09;。这些数据集常用于多…...

学透Spring Boot — 007. 七种配置方式及优先级

Spring Boot 提供很多种方式来加载配置&#xff0c;本文我们会用Tomcat的端口号作为例子&#xff0c;演示Spring Boot 常见的配置方式。 几种配置方式 使用默认配置 新建一个项目什么都不配置&#xff0c;Spring Boot会自动配置Tomcat端口号。 启动日志 TomcatWebServer :…...

元素定位-xpath

xpath其实就是一个path(路径)&#xff0c;一个描述页面元素位置信息的路径&#xff0c;相当于元素的坐标xpath基于XML文档树状结构&#xff0c;是XML路径语言&#xff0c;用来查询xml文档中的节点。 绝对定位 从根开始找--/(根目录)/html/body/div[2]/div/form/div[5]/button缺…...

【youcans论文精读】弱监督深度检测网络(Weakly Supervised Deep Detection Networks)

欢迎关注『youcans论文精读』系列 本专栏内容和资源同步到 GitHub/youcans 【youcans论文精读】弱监督深度检测网络 WSDDN 0. 弱监督检测的开山之作0.1 论文简介0.2 WSDNN 的步骤0.3 摘要 1. 引言2. 相关工作3. 方法3.1 预训练网络3.2 弱监督深度检测网络3.3 WSDDN训练3.4 空间…...

网络购物谨慎使用手机免密支付功能

在数字经济蓬勃发展的当下&#xff0c;“免密支付”成为许多人消费时的首选支付方式。 “免密支付”的存在有其合理性。在快节奏的现代生活中&#xff0c;时间愈发珍贵&#xff0c;每节省一秒都可能带来更高的效率。以日常通勤为例&#xff0c;上班族乘坐交通工具时&#xff0c…...

Sentinel[超详细讲解]-4

&#x1f693; 主要讲解流控模式的 三种方式中的两种&#xff1a; 直接、链路&#x1f680; 1️⃣ 直接模式 &#x1f68e; 直接模式&#xff1a;对资源本身进行限流&#xff0c;例如对某个接口进行限流&#xff0c;当该接口的访问频率超过设定的阈值时&#xff0c;直接拒绝新的…...

【服务日志链路追踪】

MDCInheritableThreadLocal和spring cloud sleuth 在微服务架构中&#xff0c;日志链路追踪&#xff08;Logback Distributed Tracing&#xff09; 是一个关键需求&#xff0c;主要用于跟踪请求在不同服务间的调用链路&#xff0c;便于排查问题。常见的实现方案有两种&#x…...

【行测】判断推理:图形推理

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;读不在三更五鼓&#xff0c;功只怕一曝十寒。 > 目标&#xff1a;掌握 图形推理 基本题型&#xff0c;并能运用到例题中。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! …...

OpenCV 图形API(12)用于计算图像或矩阵的平均值函数mean()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算矩阵元素的平均值&#xff08;均值&#xff09;。 mean函数计算矩阵元素的平均值M&#xff0c;每个通道独立计算&#xff0c;并返回该值。 …...

Oracle触发器使用(一):DML触发器

Oracle触发器使用(一):DML触发器 DML触发器条件谓词触发器INSTEAD OF DML触发器复合DML触发器Oracle数据库中的触发器(Trigger)本质上也是PL/SQL代码,触发器可以被Enable或者Disable,但是不能像存储过程那样被直接调用执行。 触发器不能独立存在,而是定义在表、视图、…...

3D模型给可视化大屏带来了哪些创新,都涉及到哪些技术栈。

一、3D 模型给可视化大屏带来的创新 更直观的视觉体验 传统的可视化大屏主要以二维图表和图形的形式展示数据&#xff0c;虽然能够传达一定的信息&#xff0c;但对于复杂的场景和数据关系&#xff0c;往往难以直观地呈现。而 3D 模型可以将数据以三维立体的形式展示出来&#…...

Unity HDRP管线用ShaderGraph还原Lit,方便做拓展;

里面唯一的重点就是判断有无这张复合图&#xff0c;我用的是颜色判断&#xff1a; float Tex TexCol.r*TexCol.g*TexCol.b*TexCol.a; if(Tex 1) { IsOrNot 1; } else { IsOrNot 0; } 其他的正常解码就行&#xff0c;对了法线贴图孔位记得设置成normal&#xff0c;不然的话…...

绝缘升级 安全无忧 金能电力环保绝缘胶垫打造电力安全防护新标杆

在电力安全领域&#xff0c;一块看似普通的胶垫&#xff0c;却是守护工作人员生命安全的“第一道防线”。近年来&#xff0c;随着电网设备升级和环保要求趋严&#xff0c;传统绝缘胶垫有异味、易老化、绝缘性能不足等问题逐渐暴露。为此&#xff0c;金能电力凭借技术创新推出新…...

Linux命令-iotop

iotop 命令 iotop 是一个用于实时监控磁盘 I/O 活动的工具&#xff0c;可以显示哪些进程正在使用磁盘资源。 参数 描述 –version 显示程序版本号并退出 -h, --help 显示此帮助消息并退出 -o, --only 仅显示实际进行 I/O 操作的进程或线程 -b, --batch 非交互模式&#xff0c;适…...

记录 | Android getWindow().getDecorView().setSystemUiVisibility(...)设置状态栏属性

纯纯的一边开发一边学习&#xff0c;是小白是菜鸟&#xff0c;单纯的记录和学习&#xff0c;大神勿喷&#xff0c;理解有错望指正&#xff5e; getWindow().getDecorView().setSystemUiVisibility(…) 该方法用于控制系统 UI&#xff08;如状态栏、导航栏&#xff09;的可见性…...

QTableWidget 中insertRow(0)(头插)和 insertRow(rowCount())(尾插)的性能差异

一、目的 在 Qt 的 QTableWidget 中&#xff0c;insertRow(0) &#xff08;头插&#xff09;和 insertRow(rowCount())&#xff08;尾插&#xff09;在性能上存在显著差异。 二、QAbstractItemModel:: insertRows 原文解释 QAbstractItemModel Class | Qt Core 5.15.18 AI 解…...

用nodejs连接mongodb数据库对标题和内容的全文本搜索,mogogdb对文档的全文本索引的设置以及用node-rs/jieba对标题和内容的分词

//首先我们要在Nodejs中安装 我们的分词库node-rs/jieba,这个分词不像jieba安装时会踩非常多的雷&#xff0c;而且一半的机率都是安装失败&#xff0c;node-rs/jieba比jieba库要快20-30%&#xff1b;安装分词库是为了更好达到搜索的效果 这个库直接npm install node-rs/jieba即…...

【万字总结】前端全方位性能优化指南(完结篇)——自适应优化系统、遗传算法调参、Service Worker智能降级方案

前言 自适应进化宣言 当监控网络精准定位病灶&#xff0c;真正的挑战浮出水面&#xff1a;系统能否像生物般自主进化&#xff1f; 五维感知——通过设备传感器实时捕获环境指纹&#xff08;如地铁隧道弱光环境自动切换省电渲染&#xff09; 基因调参——150个性能参数在遗传算…...

不绕弯地解决文件编码问题,锟斤拷烫烫烫

安装python对应库 pip install chardet 检测文件编码 import chardet# 检测文件编码 file_path rC:\Users\AA\Desktop\log.log # 这里放文件和文件绝对路径 with open(file_path, rb) as f:raw_data f.read(100000) # 读取前10000个字节result chardet.detect(raw_data)e…...

高密度任务下的挑战与破局:数字样机助力火箭发射提效提质

2025年4月1日12时&#xff0c;在酒泉卫星发射中心&#xff0c;长征二号丁运载火箭顺利升空&#xff0c;成功将一颗卫星互联网技术试验卫星送入预定轨道&#xff0c;发射任务圆满完成。这是长征二号丁火箭的第97次发射&#xff0c;也是长征系列火箭的第567次发射。 执行本次任务…...

QT Quick(C++)跨平台应用程序项目实战教程 6 — 弹出框

目录 1. Popup组件介绍 2. 使用 上一章内容完成了音乐播放器程序的基本界面框架设计。本小节完成一个简单的功能。单击该播放器顶部菜单栏的“关于”按钮&#xff0c;弹出该程序的相关版本信息。我们将使用Qt Quick的Popup组件来实现。 1. Popup组件介绍 Qt 中的 Popup 组件…...

【面试篇】Es

基础概念类 问题&#xff1a;请简要介绍 Elasticsearch 是什么&#xff0c;它的主要特点有哪些&#xff1f; 答案&#xff1a;Elasticsearch 是一个基于 Lucene 库的开源分布式搜索引擎和分析引擎。它能对海量数据进行实时搜索与分析&#xff0c;被广泛应用于日志分析、全文搜…...

KisFlow-Golang流式实时计算案例(四)-KisFlow在消息队列MQ中的应用

Golang框架实战-KisFlow流式计算框架专栏 Golang框架实战-KisFlow流式计算框架(1)-概述 Golang框架实战-KisFlow流式计算框架(2)-项目构建/基础模块-(上) Golang框架实战-KisFlow流式计算框架(3)-项目构建/基础模块-(下) Golang框架实战-KisFlow流式计算框架(4)-数据流 Golang框…...

leetcode:1582. 二进制矩阵中的特殊位置(python3解法)

难度&#xff1a;简单 给定一个 m x n 的二进制矩阵 mat&#xff0c;返回矩阵 mat 中特殊位置的数量。 如果位置 (i, j) 满足 mat[i][j] 1 并且行 i 与列 j 中的所有其他元素都是 0&#xff08;行和列的下标从 0 开始计数&#xff09;&#xff0c;那么它被称为 特殊 位置。 示…...

大型语言模型的智能本质是什么

大型语言模型的智能本质是什么 基于海量数据的统计模式识别与生成系统,数据驱动的语言模拟系统 ,其价值在于高效处理文本任务(如写作、翻译、代码生成),而非真正的理解与创造 大型语言模型(如GPT-4、Claude等)的智能本质可概括为基于海量数据的统计模式识别与生成系统,…...