解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問(wèn)題
更新時(shí)間：2024年05月14日 10:30:10 作者：蒾酒
這篇文章主要給大家介紹了如何解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問(wèn)題,文中通過(guò)圖文結(jié)合的方式講解的非常詳細(xì),有需要的朋友可以參考下
問(wèn)題
開發(fā)完項(xiàng)目打包并部署
然后訪問(wèn)時(shí)發(fā)現(xiàn)導(dǎo)航欄背景圖片沒加載
打開瀏覽器控制臺(tái)發(fā)現(xiàn)這張圖片報(bào)錯(cuò)404
原因
可能是因?yàn)樵诓渴鸷蟮姆?wù)器環(huán)境中對(duì)中文文件名的支持不完善。服務(wù)器在解析 URL 時(shí)可能無(wú)法正確識(shí)別或編碼中文字符，導(dǎo)致無(wú)法正確找到文件路徑。因此，改用英文文件名后，服務(wù)器能夠正確解析和訪問(wèn)到文件，所以圖片顯示正常。
解決方案
將背景圖片名稱修改成英文
重新打包
正常顯示了
以上就是解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于vue3靜態(tài)資源圖片不加載的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue-cli4使用全局less文件中的變量配置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue中mixins的工具的封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的方法示例
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的相關(guān)資料,文中通過(guò)代碼及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-11-11
ref和reactive是Vue3中構(gòu)建響應(yīng)式數(shù)據(jù)的兩大核心 API,雖然它們?cè)谑褂蒙舷嗨?但底層機(jī)制和適用場(chǎng)景有明顯不同,這篇文章主要介紹了vue3中ref和reactive區(qū)別的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
之前只是淺顯的使用插件進(jìn)行vue開發(fā)展示,最近深入的研究了下,下面這篇文章主要給大家介紹了關(guān)于Vue3兄弟組件傳值之mitt的超詳細(xì)講解,需要的朋友可以參考下2022-06-06
vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例
這篇文章主要介紹了vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
vue 監(jiān)聽鍵盤回車事件詳解 @keyup.enter || @keyup.enter.native
今天小編就為大家分享一篇vue 監(jiān)聽鍵盤回車事件詳解 @keyup.enter || @keyup.enter.native，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem)
這篇文章主要介紹了Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
我們?cè)陂_發(fā)的時(shí)候會(huì)經(jīng)常用的導(dǎo)出excel表格功能,剛好自己開發(fā)有遇到,就記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue前端表格導(dǎo)出Excel文件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
Vue2使用vue-video-player實(shí)現(xiàn)斷點(diǎn)續(xù)傳功能
斷點(diǎn)續(xù)傳是指在文件傳輸過(guò)程中,如果傳輸被中斷或者發(fā)生錯(cuò)誤,可以從上一次中斷的地方繼續(xù)傳輸,而不是從頭開始,這對(duì)于大文件的傳輸尤為重要,本文給大家介紹了Vue2使用vue-video-player實(shí)現(xiàn)斷點(diǎn)續(xù)傳功能,需要的朋友可以參考下2025-07-07