首先实蓬，vue項(xiàng)目有兩個(gè)地方可以存放靜態(tài)資源缘琅。一個(gè)是assets文件夾演闭，一個(gè)是static文件夾（地址欄輸入static可以直接訪問(wèn)）褒颈。放到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: '../../'币狠，主要解決背景圖片路徑的問(wèn)題。
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
這樣改動(dòng)的原因是Vue打包完成的目錄結(jié)構(gòu)中砾层，js/css文件與static目錄的層級(jí)差了2級(jí)
