vue项目background-image引入背景图报错

之前写好的代码明明运行很正常,今天早上突然在预发环境挂掉了

[31mERROR in ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false,"root":"C://Program Files (x86)//Jenkins//workspace//novice_region//front_page//src//assets"}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-6fa1d485","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/page/newStockDetail.vue
Module build Failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../assets/ns_detail_bg.png' in 'C:\Program Files (x86)\Jenkins\workspace\novice_region\front_page\src\page'

怎么回事呢?
仔细排查后,本地运行正常,并不会出现这个问题,但是测试环境一直就是这个错误,有点懵逼。
没办法,只能仔细对比两个环境了。
仔细对比后发现配置都没有变动,那就看看版本吧,发现昨天vue版本升级了,导致了这个问题!
查阅资料后发现:
vue2.5及以下版本background-image: url('../assets/btn-bgc.png')这种写法没有问题,
但是2.6就会出现这个问题,和webpack配置相关 .vue2.6用的是webapack4.0导致
所以换一种写法就好background-image: url('~@/assets/btn-bgc.png')

关于webpack资源处理的规则,分为相对路径,没有前缀的路径,带~的路径,相对根目录的路径

1.相对路径: "./assets/logo_blue.png" 
2.没有前缀的路径 "assets/logo_blue.png" 被webpack解析为相对路径
3.带~的路径  "~@/assets/theme/logo_blue.png" 被webpack解析为 require(src/assets/theme/logo_blue.png) 动态引入 
@在webpack 被resolve.alias配置下等价于/src
4.相对根目录的路径 "/assets/logo_blue.png" webpack不解析

相关文章

一准备工作umi为react的一个封装比较nice的脚手架。优点当然...
webpack在引入两个依赖的包时,可能需要使用shimming,意思是...
  Happypack (plugin)多线程使用loader编译文件treeshaki...
一目录结构├──build//构建相关├──config//配置相关├─...
接着第一节的demo现在我们尝试整合一些其他资源,比如图像,...
webpack的打包原理识别入口文件通过逐层识别模块依赖(Common...