解決vue-cli webpack打包后加載資源的路徑問題
vue項目，訪問打包后的項目，輸入路徑后，頁面加載空白。這時會有兩類問題，都是路徑問題。
1.一個是css,js,ico等文件加載不到，是目錄里少了dist
打開頁面時一片空白
解決辦法：
config/index.js文件的build->assetsPublicPath的默認(rèn)值改為 './'
assetsPublicPath：資源的根目錄。這個是通過http服務(wù)器運行的url路徑。因為webapp和static中間還有層dist,所以要用'./'
2.另一個就是單純的在背景圖使用相對路徑導(dǎo)致加載不到圖片
例如登錄頁面的背景圖設(shè)置
我的目錄結(jié)構(gòu)是這樣的，
頁的時候沒發(fā)使用@/../static 只能使用../../../static
這個時候，打包過后的登陸頁面引用圖片路徑錯誤，多了一個/static/css
解決辦法：
build/utils.js文件的ExtractTextPlugin.extract=>新增 publicPath:"../../"
publicPath:重寫該加載器(loader) css 的 publicPath 的設(shè)置
以上這篇解決vue-cli webpack打包后加載資源的路徑問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何在vue中使用unocss以及基本使用方法的相關(guān)資料,unocss是一個即時的原子CSS引擎,它可以讓你用簡短的類名來控制元素的樣式,而不需要寫復(fù)雜的CSS代碼,需要的朋友可以參考下2023-07-07
VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)
使用uniapp開發(fā)微信小程序時,多多少少會遇到獲取當(dāng)前位置的詳細信息,下面這篇文章主要給大家介紹了關(guān)于VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)的相關(guān)資料,需要的朋友可以參考下2023-04-04
下面小編就為大家分享一篇vue將對象新增的屬性添加到檢測序列的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法的相關(guān)資料,文章中有詳細的代碼示例,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue使用HMAC-SHA256簽名算法的相關(guān)知識,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
文章介紹了如何在Vue3和Beego中配置跨域請求,在Beego的router.go文件的init函數(shù)中添加option函數(shù)來回應(yīng)預(yù)檢請求,以支持跨域請求,這是個人經(jīng)驗分享,希望能幫助到大家2025-01-01
vue3中調(diào)用api接口實現(xiàn)數(shù)據(jù)的渲染以及詳情方式
這篇文章主要介紹了vue3中調(diào)用api接口實現(xiàn)數(shù)據(jù)的渲染以及詳情方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
使用mint-ui實現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼
下面小編就為大家分享一篇使用mint-ui實現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue-cli項目使用mock數(shù)據(jù)的方法（借助express）
現(xiàn)如今前后端分離開發(fā)越來越普遍，前端人員寫好頁面后可以自己模擬一些數(shù)據(jù)進行代碼測試，這樣就不必等后端接口，提高了我們開發(fā)效率。今天就來分析下前端常用的mock數(shù)據(jù)的方式是如何實現(xiàn)的,需要的朋友可以參考下2019-04-04
這篇文章主要給大家介紹了關(guān)于Vue項目打包為exe可安裝程序操作步驟的相關(guān)資料,Vue是一種流行的JavaScript框架,用于構(gòu)建單頁面應(yīng)用程序(SPA),需要的朋友可以參考下2023-12-12