之前写好的代码明明运行很正常,今天早上突然在预发环境挂掉了
[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不解析