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