淺談Vue static 靜態(tài)資源路徑 和 style問(wèn)題
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
// Paths assetsRoot: path.resolve(__dirname, '../dist'), // 靜態(tài)資源輸出到二級(jí)目錄下 assetsSubDirectory: 'static', // 靜態(tài)資源cdn地址 assetsPublicPath: '/',
引用的時(shí)候可直接，不用返回上一級(jí)去查找，因?yàn)榫幾g輸出后的 static 下的資源 跟 html 是在同一個(gè)目錄
<img class="navbar-brand-logo" src="static/logo.png"></a>
如果單個(gè)vue文件里的 style 沒(méi)有用到 最好刪除掉 不然 html頁(yè)面會(huì)自動(dòng)生成一個(gè) 空的style
補(bǔ)充知識(shí)：webpack+vuecli打包生成資源相對(duì)引用路徑與背景圖片的正確引用
資源相對(duì)引用路徑
問(wèn)題描述
一般情況下，通過(guò)webpack+vuecli默認(rèn)打包的css、js等資源，路徑都是絕對(duì)的。
但當(dāng)部署到帶有文件夾的項(xiàng)目中，這種絕對(duì)路徑就會(huì)出現(xiàn)問(wèn)題，因?yàn)榘雅渲玫膕tatic文件夾當(dāng)成了根路徑，那么要解決這種問(wèn)題，就得引用相對(duì)路徑。
解決辦法
打開(kāi)webpack.prod.conf.js
找到output：增加 publicPath: './', 即可，如圖。
那么這樣后，資源的引用路徑就正確了。
當(dāng)然在config文件夾下的index.js中修改 assetsPublicPath: './'同樣也可以達(dá)到資源的相對(duì)引用。
背景圖片的引用問(wèn)題
上面雖然解決了資源路徑的引用問(wèn)題，但是資源里面的背景圖片，不像index.html中加載資源一樣，通過(guò)./static/js/app.js引用可以正常加載，圖片資源是通過(guò)css加載的，如 background: url("../../assets/images/logo-index.png") no-repeat;被相對(duì)打包后變成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我們要保留css引用圖片的正常路徑，即：
url(../../static/img/logo-index.2f00bf2.png) no-repeat
那么就需要修改build文件夾下的utils.js代碼，如圖所示：
添加如圖所示的一行代碼，這樣不論是字體還是圖片的引用問(wèn)題都能解決。
以上這篇淺談Vue static 靜態(tài)資源路徑 和 style問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue props用法詳解(小結(jié)),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue利用指令實(shí)現(xiàn)快速設(shè)置元素的高度
在項(xiàng)目中經(jīng)常有需要將列表的高度設(shè)置成剩余可視區(qū)域的高度,本文主要來(lái)和大家介紹一下如何通過(guò)指令和css變量的方式快速設(shè)置列表高度,希望對(duì)大家有所幫助2024-03-03
關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞,參數(shù)獲取
這篇文章主要介紹了關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞，參數(shù)獲取方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要給大家介紹了基于Vue+Echart的動(dòng)態(tài)圖繪制,用戶需要展示他的數(shù)據(jù)庫(kù)是有哪個(gè)數(shù)據(jù)庫(kù)轉(zhuǎn)化的,需要展示數(shù)據(jù)庫(kù)的軌跡圖,前導(dǎo)庫(kù)的關(guān)系圖,文中有詳細(xì)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-10-10
基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問(wèn)題解決
這篇文章主要介紹了基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問(wèn)題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue.js實(shí)現(xiàn)插入數(shù)值與表達(dá)式的方法分析
這篇文章主要介紹了vue.js實(shí)現(xiàn)插入數(shù)值與表達(dá)式的方法,結(jié)合實(shí)例形式分析了vue.js常見(jiàn)的3種插入數(shù)值實(shí)現(xiàn)方式,并總結(jié)了vue.js插值與表達(dá)式相關(guān)使用技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue封裝Axios請(qǐng)求和攔截器的步驟，幫助大家更好的對(duì)axios進(jìn)行封裝并將接口統(tǒng)一管理，同時(shí)為請(qǐng)求和響應(yīng)設(shè)置攔截器interceptors。，感興趣的朋友可以了解下2020-09-09
關(guān)于Vue-extend和VueComponent問(wèn)題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
前端element-ui兩層dialog嵌套遮罩層消失的問(wèn)題解決辦法
最近使用vue+elementUI做項(xiàng)目,使用過(guò)程中很多地方會(huì)用到dialog這個(gè)組件,有好幾個(gè)地方用到了dialog的嵌套,這篇文章主要給大家介紹了關(guān)于前端element-ui兩層dialog嵌套遮罩層消失的問(wèn)題解決辦法,需要的朋友可以參考下2024-08-08
淺談vue權(quán)限管理實(shí)現(xiàn)及流程
這篇文章主要介紹了淺談vue權(quán)限管理實(shí)現(xiàn)及流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04