首先娘锁，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í)
作者：蘇瑾諾
鏈接：http://www.reibang.com/p/c57d50dcf1c5
來(lái)源：簡(jiǎn)書(shū)
