淺談Vue static 靜態(tài)資源路徑 和 style問題
我就廢話不多說了，大家還是直接看代碼吧~
// Paths assetsRoot: path.resolve(__dirname, '../dist'), // 靜態(tài)資源輸出到二級目錄下 assetsSubDirectory: 'static', // 靜態(tài)資源cdn地址 assetsPublicPath: '/',
引用的時候可直接，不用返回上一級去查找，因為編譯輸出后的 static 下的資源 跟 html 是在同一個目錄
<img class="navbar-brand-logo" src="static/logo.png"></a>
如果單個vue文件里的 style 沒有用到 最好刪除掉 不然 html頁面會自動生成一個 空的style
補(bǔ)充知識：webpack+vuecli打包生成資源相對引用路徑與背景圖片的正確引用
資源相對引用路徑
問題描述
一般情況下，通過webpack+vuecli默認(rèn)打包的css、js等資源，路徑都是絕對的。
但當(dāng)部署到帶有文件夾的項目中，這種絕對路徑就會出現(xiàn)問題，因為把配置的static文件夾當(dāng)成了根路徑，那么要解決這種問題，就得引用相對路徑。
解決辦法
打開webpack.prod.conf.js
找到output：增加 publicPath: './', 即可，如圖。
那么這樣后，資源的引用路徑就正確了。
當(dāng)然在config文件夾下的index.js中修改 assetsPublicPath: './'同樣也可以達(dá)到資源的相對引用。
背景圖片的引用問題
上面雖然解決了資源路徑的引用問題，但是資源里面的背景圖片，不像index.html中加載資源一樣，通過./static/js/app.js引用可以正常加載，圖片資源是通過css加載的，如 background: url("../../assets/images/logo-index.png") no-repeat;被相對打包后變成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我們要保留css引用圖片的正常路徑，即：
url(../../static/img/logo-index.2f00bf2.png) no-repeat
那么就需要修改build文件夾下的utils.js代碼，如圖所示：
添加如圖所示的一行代碼，這樣不論是字體還是圖片的引用問題都能解決。
以上這篇淺談Vue static 靜態(tài)資源路徑 和 style問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
混淆是一種有效的保護(hù)措施,可以加密和壓縮代碼,使其難以被理解和修改,本文將介紹Vue混淆的概念以及如何進(jìn)行還原,感興趣的可以了解一下2023-12-12
記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了如何使用Vue生成動態(tài)表單,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue Element-UI中el-table實現(xiàn)單選的示例代碼
在element-ui中是為我們準(zhǔn)備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
如何在Vue3中使用視頻庫Video.js實現(xiàn)視頻播放功能
在Vue3項目中集成Video.js庫,可以創(chuàng)建強(qiáng)大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫Video.js實現(xiàn)視頻播放功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要介紹了詳解VUE中的插值( Interpolation)語法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了vue 命名視圖的相關(guān)知識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
淘寶大家都使用過，淘寶滑動驗證碼的目的是為了驗證到底是人還是機(jī)器，今天小編給大家分享的是模仿淘寶滑動驗證碼的樣式，感興趣的朋友跟隨小編一起看看吧2019-12-12
Vue?element-ui表格內(nèi)嵌進(jìn)度條功能實現(xiàn)方法
Element-Ul是餓了么前端團(tuán)隊推出的一款基于Vue.js 2.0 的桌面端UI框架,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui表格內(nèi)嵌進(jìn)度條功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了記錄vue做微信自定義分享的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09