vue webpack打包后圖片路徑錯(cuò)誤的完美解決方法
項(xiàng)目用run dev build 打包后，發(fā)現(xiàn)很多圖片都不顯示，在本地是沒有問題的?。≌以虬l(fā)現(xiàn)通過webpack+vuecli默認(rèn)打包的css、js等資源，路徑都是絕對(duì)的。
因?yàn)槲覀兊膱D片路徑都是經(jīng)歷過文件夾的，在本地引用圖片是絕對(duì)路徑，但打包后因?yàn)榘雅渲玫膕tatic文件夾當(dāng)成了根路徑，所以很多圖片找不到都不顯示。
解決辦法如圖：
(1).
修改 assetsPublicPath: './'
(2).打開webpack.prod.conf.js，在output：增加 publicPath: './'
雖然解決了資源路徑的引用問題，但是資源里面的背景圖片還是不顯示， background: url("../../assets/images/logo-index.png") no-repeat;被相對(duì)打包后變成了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ò)誤的完美解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了解決vue前后端端口不一致的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了Vue下路由History模式打包后頁面空白，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
elementPuls 表格反選實(shí)現(xiàn)示例代碼
這篇文章主要介紹了elementPuls 表格反選實(shí)現(xiàn)示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問題
這篇文章主要介紹了Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法
在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個(gè)頁面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法,需要的朋友可以參考下2024-03-03
Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))
這篇文章主要介紹了Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
對(duì)于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對(duì)組件之間消息傳遞的常用方式的總結(jié)2022-08-08
這篇文章主要幫助大家簡(jiǎn)單的理解vue中Props屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
本篇文章主要介紹了vue-axios使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了在vue里使用codemirror遇到問題，本文給大家記錄下來了,需要的朋友可以參考下2018-11-11