1.用js動態(tài)加載assets或者本文件的圖片出現(xiàn)404的狀態(tài)碼
原因:在webpack中會將圖片圖片來當(dāng)做模塊來用靴患,因為是動態(tài)加載的钉疫,所以url-loader將無法解析圖片地址涉瘾,然后npm run dev 或者npm run build之后導(dǎo)致路徑?jīng)]有被加工【被webpack解析到的路徑都會被解析為/static/img/[filename].png知态,完整地址為localhost:8080/static/img/[filename].png】
解決方法:將圖片作為模塊加載進(jìn)去,比如images:[{src:require(‘./1.png')},{src:require(‘./2.png')}]這樣webpack就能將其解析立叛。
2.打包后img標(biāo)簽圖片路徑不對
解決辦法:
config/index.js文件的build->assetsPublicPath的默認(rèn)值改為 './'
assetsPublicPath:資源的根目錄负敏。這個是通過http服務(wù)器運行的url路徑。因為webapp和static中間還有層dist,所以要用'./'
3.打包后背景圖片路徑不對
為什么背景圖有的打包后存在秘蛇,有的丟失原在,那是因為vue會把圖片轉(zhuǎn)成base64,但是圖片大小超過閾值就不轉(zhuǎn)了友扰,直接引,而背景圖片里用的是相對路徑最后會直接替換成static庶柿,但是明顯路徑會有問題村怪,所以得配置下
build/utils.js