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

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

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


http://www.mrgr.cn/news/96635.html

相关文章:

  • 分享一个Drools规则引擎微服务Docker部署
  • mysql JSON_ARRAYAGG联合JSON_OBJECT使用查询整合(数组对象)字段
  • RKNN SDK User Guide学习要点
  • 蓝桥杯15届JAVA_A组
  • 【QT5 网络编程示例】TCP 通信
  • Kong网关研究
  • 【Unity】记录TMPro使用过程踩的一些坑
  • Spark,上传文件
  • HTML中数字和字母不换行显示
  • 数据结构和算法(十一)--图
  • 去中心化稳定币机制解析与产品策略建议
  • ros2--xacro
  • Python-八股总结
  • 【群智能算法改进】一种改进的蜣螂优化算法IDBO[3](立方混沌映射Cubic、融合鱼鹰勘探策略、混合高斯柯西变异)【Matlab代码#92】
  • 【MVC简介-产生原因、演变历史、核心思想、组成部分、使用场景】
  • 【Pandas】pandas Series to_markdown
  • 六种光耦综合对比——《器件手册--光耦》
  • 十五届蓝桥杯省赛Java B组(持续更新..)
  • ISIS【路由协议讲解】-通俗易懂!
  • 汇编学习之《数据传输指令》