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中的靜態背景圖片路徑問題。