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:'../../',
        }
      },