1.在CSS中引入圖片
 

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

注意：此處的圖片與索引檔案在同一個目錄下;

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

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

（1）開始使用暴力的方法，在配置檔案（webpack.base.conf.js）中設定限制引數

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

極限引數，代表如果圖片小於大約4K則會自動幫你壓縮成BASE64編碼的圖片，否則拷貝檔案到生產目錄，這裡如果將限制值設定很大的話，頁面上所有的圖片都會壓縮成BASE64的圖片，這樣的話就不會涉及到路徑的問題，當然這種暴力的方法會給瀏覽器帶來很大的壓力。

（2）現在說說柔和的方法，稍微查一下原因就應該知道，CSS引入圖片再打包後，風格裝載機無法設定自己的publicPath，所以只要改變風格裝載機中的publicPath即可，一行程式碼即可以搞定，

找到建/ 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)
    }
 

重新bulid一下就OK了，我比較喜歡第二種方法，比較方便。