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

news2025/4/8 6:45:47

问题如下:

测试环境配置:

  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
};

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

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

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

相关文章

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 集合&…

【网络安全实验】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 :…

【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 空间…

【服务日志链路追踪】

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

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

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

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;适…

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 解…

【万字总结】前端全方位性能优化指南(完结篇)——自适应优化系统、遗传算法调参、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 组件…

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;那么它被称为 特殊 位置。 示…

Cline – OpenRouter 排名第一的CLI 和 编辑器 的 AI 助手

Cline – OpenRouter 排名第一的CLI 和 编辑器 的 AI 助手&#xff0c;Cline 官网&#xff1a;https://github.com/cline/cline Star 37.8k ps&#xff0c;OpenRouter的网址是&#xff1a;OpenRouter &#xff0c;这个排名第一&#xff0c;据我观察&#xff0c;是DeepSeek v3…