vue-cli中解決css引用圖片打包後找不到文件資源的問題

在css中引入圖片

#slider1 {
  background-image: url(./bg02.jpg);
  background-size: cover;
}

注意：此處的圖片與index文件在同一個目錄下；

在開發環境下背景圖片是能夠好好的顯示的，可是打包後提示找不到資源，報錯：

解決的方法有兩種：暴力的和柔和的

（1）開始使用暴力的方法，在配置文件（webpack.base.conf.js）中設置limit參數

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 4192,
          name: utils.assetsPath('img/[name].[ext]')
        }
      },

limit參數，表明若是圖片小於大約4k則會自動幫你壓縮成base64編碼的圖片,不然拷貝文件到生產目錄，這裏若是將limit值設置很大的話，頁面上全部的圖片都會壓縮成base64的圖片，這樣的話就不會涉及到路徑的問題，固然這種暴力的方法會給瀏覽器帶來很大的壓力。

（2）如今說說柔和的方法，稍微查一下緣由就應該知道，css引入圖片再打包後，style-loader沒法設置本身的publicPath，因此只要改變style-loader中的publicPath便可，一行代碼便可以搞定，

找到build/util.js文件中ExtractTextPlugin的css路徑，手動添加publicPath參數，

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

從新build一次，問題解決了