vue webpack打包后圖片路徑錯(cuò)誤的完美解決方法
項(xiàng)目用run dev build 打包后，發(fā)現(xiàn)很多圖片都不顯示，在本地是沒有問題的??！找原因發(fā)現(xiàn)通過webpack+vuecli默認(rèn)打包的css、js等資源，路徑都是絕對的。
因?yàn)槲覀兊膱D片路徑都是經(jīng)歷過文件夾的，在本地引用圖片是絕對路徑，但打包后因?yàn)榘雅渲玫膕tatic文件夾當(dāng)成了根路徑，所以很多圖片找不到都不顯示。
解決辦法如圖：
(1).
修改 assetsPublicPath: './'
(2).打開webpack.prod.conf.js，在output：增加 publicPath: './'
雖然解決了資源路徑的引用問題，但是資源里面的背景圖片還是不顯示， background: url("../../assets/images/logo-index.png") no-repeat;被相對打包后變成了url(static/img/logo-index.2fbf2.png) no-repeat所以我們要保留css引用圖片的正常路徑，即：url(../../static/img/logo-index.2fbf2.png) no-repeat
那么就需要修改build文件夾下的utils.js代碼，如圖所示：
添加publicPath:'../../'這一行代碼，這樣不論是字體還是圖片的引用問題都能解決。
總結(jié)
以上所述是小編給大家介紹的vue webpack打包后圖片路徑錯(cuò)誤的完美解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue的列表交錯(cuò)過渡實(shí)現(xiàn)代碼示例
這篇文章主要介紹了vue的列表交錯(cuò)過渡實(shí)現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要給大家介紹了關(guān)于vue中插槽slot的理解和使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue項(xiàng)目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決
這篇文章主要介紹了vue項(xiàng)目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
axios 實(shí)現(xiàn)post請求時(shí)把對象obj數(shù)據(jù)轉(zhuǎn)為formdata
今天小編就為大家分享一篇axios 實(shí)現(xiàn)post請求時(shí)把對象obj數(shù)據(jù)轉(zhuǎn)為formdata，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue-seamless-scroll無縫滾動(dòng)組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue-seamless-scroll無縫滾動(dòng)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了vue-router 導(dǎo)航鉤子的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Vue+ECharts實(shí)現(xiàn)中國地圖的繪制及各省份自動(dòng)輪播高亮顯示
這篇文章主要介紹了Vue+ECharts實(shí)現(xiàn)中國地圖的繪制以及拖動(dòng)、縮放和各省份自動(dòng)輪播高亮顯示,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue使用fengMap速度慢的原因分析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實(shí)現(xiàn)el-select 觸底分頁+遠(yuǎn)程搜索的示例
有的時(shí)候數(shù)據(jù)量比較大,比如幾千甚至上萬條的時(shí)候,如果直接賦值,整個(gè)頁面的 dom 會(huì)被撐爆,本文主要介紹了vue實(shí)現(xiàn)el-select 觸底分頁+遠(yuǎn)程搜索的示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
vue中axios的post請求,415錯(cuò)誤的問題
這篇文章主要介紹了vue中axios的post請求,415錯(cuò)誤的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04