.bg
width 100%
position fixed
left 0
top 0
height 100vh
z-index -1
background url('~@/assets/imgs/bg9.jpg') center no-repeat // 这个背景图片
background-size cover
filter blur(4px)
打包生成后的地址：
.login .bg[data-v-c3a977bc] {
width: 100%;
position: fixed;
left:;
top:;
height: 100vh;
z-index: -1;
background: url(img/bg9.32c9a00.jpg) 50% no-repeat; // 这个地址就会变成 。。。。前面的绝对地址 + css + img/bg9.32c9a00.jpg，变成在css目录下找img了
background-size: cover; filter: blur(4px); }
由于webpack打包图片会设置一个最大的图片大小，超过这个图片大小，就不会转化成base64的，还是直接转换成图片：
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 这个是限制大小的
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
所以之前打包的时候没有问题因为我的图片大小是可以转换成base64的，坐下面设置就可以找到：
assetsPublicPath: './'
现在需要更改build文件夹下面的util.js:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../', // 这个地方是我新加的，让css里面找路径都往上再找一级
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
以上就是vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题的详细内容，更多关于vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题的资料请关注九品源码其它相关文章！