首先，vue項(xiàng)目有兩個(gè)地方可以存放靜態(tài)資源。一個(gè)是assets文件夾，一個(gè)是static文件夾（地址欄輸入static可以直接訪問）。放到static里面webpack打包后只會(huì)把資源復(fù)制到發(fā)布目錄而不會(huì)把小圖片優(yōu)化為base64。而assets內(nèi)的資源會(huì)被webpack打包,比如圖片,會(huì)被轉(zhuǎn)為BASE64。為了兼顧圖片資源優(yōu)化，所以還是不適合把圖片資源放到static。

而當(dāng)我們把這些資源放入assets文件夾時(shí)，當(dāng)引入的圖片是背景圖片時(shí)，會(huì)報(bào)錯(cuò)。

 <img src="@/assets/logo.png" alt="">

.bg {
    width: 100px;
    height: 200px;
    background: url('~@/assets/logo.png')
}

這個(gè)時(shí)候，還需配置build => util.js 里找到ExtractTextPlugin.extract增加一行：publicPath: '../../'，主要解決背景圖片路徑的問題。

 return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader',
      publicPath: '../../'
  })

這樣改動(dòng)的原因是Vue打包完成的目錄結(jié)構(gòu)中，js/css文件與static目錄的層級(jí)差了2級(jí)