vue升级Webpack4后打包的css背景图片路径错误

webpack4升级之后对于css的打包需要用到mini-css-extract-plugin替换掉之前webpack3版本的extract-text-webpack-plugin插件。之前css静态打包对于背景图片需要的是在build文件夹内的utils.js文件中更改为

if (options.extract) {  
return ExtractTextPlugin.extract({    
use: loaders,    
fallback: 'vue-style-loader',    
publicPath: '../../'  // 这行是需要添加的
})} 
else {  
return ['vue-style-loader'].concat(loaders)
}

但是 在webpack4升级之后 是下面这种情况

 

// webpack4升级代码  
return [    
options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader',].concat(loaders)
].concat(loaders)

我试过直接更改 webpack.base.conf.js中的rules

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]'),
          //添加路径
          publicPath:'../../',
        }
      },

一刷新页面，哇！成功了，其实并没有 ，img标签本地引用路径错误了，虽然背景图搞定了，但是得不偿失。

所以只能在返回值里面手动添加publicPath: '../../'使用下边代码片段

return [  
options.extract ? {    
loader: MiniCssExtractPlugin.loader,    
options: {      
publicPath: '../../'    
}  } : 'vue-style-loader',
].concat(loaders)

得到返回值于webpack3的一致，完美解决css中的静态背景图片路径问题。