淺談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)文章
混淆是一種有效的保護(hù)措施,可以加密和壓縮代碼,使其難以被理解和修改,本文將介紹Vue混淆的概念以及如何進(jìn)行還原,感興趣的可以了解一下2023-12-12
記一次Vue.js混入mixin的使用(分權(quán)限管理頁(yè)面)
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權(quán)限管理頁(yè)面)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了如何使用Vue生成動(dòng)態(tài)表單,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼
在element-ui中是為我們準(zhǔn)備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能
在Vue3項(xiàng)目中集成Video.js庫(kù),可以創(chuàng)建強(qiáng)大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
詳解VUE中的插值( Interpolation)語(yǔ)法
這篇文章主要介紹了詳解VUE中的插值( Interpolation)語(yǔ)法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了vue 命名視圖的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue仿淘寶滑動(dòng)驗(yàn)證碼功能(樣式模仿)
淘寶大家都使用過(guò)，淘寶滑動(dòng)驗(yàn)證碼的目的是為了驗(yàn)證到底是人還是機(jī)器，今天小編給大家分享的是模仿淘寶滑動(dòng)驗(yàn)證碼的樣式，感興趣的朋友跟隨小編一起看看吧2019-12-12
Vue?element-ui表格內(nèi)嵌進(jìn)度條功能實(shí)現(xiàn)方法
Element-Ul是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui表格內(nèi)嵌進(jìn)度條功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了記錄vue做微信自定義分享的一些問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09