深入淺出vue圖片路徑的實(shí)現(xiàn)
基礎(chǔ)
1.webpack打包本質(zhì)
本質(zhì)就是nodejs去執(zhí)行webpack腳本,由webpack腳本對(duì)項(xiàng)目各個(gè)文件進(jìn)行必要的編譯(通俗而言即字符串處理),再輸出到某個(gè)目錄
2.import from 和require
webpack相關(guān)腳本中的require和我們前端js文件中使用的require函數(shù)不是一回事,它的require是nodejs的關(guān)鍵字。
而前端js文件中,使用到的require在編譯時(shí)相當(dāng)于一個(gè)webpack定義的關(guān)鍵字,運(yùn)行時(shí)則是webpack提供的一個(gè)函數(shù)。主要能力有:完成導(dǎo)入,參數(shù)可以省略部分后綴名(需要配置)、是目錄時(shí)導(dǎo)入該目錄下的index.js、能夠使用別名(alias,需要配置)、導(dǎo)入圖片(實(shí)際導(dǎo)入為base64編碼后的字符串),通過編譯時(shí)提供信息給各個(gè)loader處理以獲得各種加載導(dǎo)入功能。import from是webpack提供的語法糖,可當(dāng)作是const xx=require(xxxx)的組合。
3.webpack模塊化處理解析配置
即webpack的resolve配置:解析(resolve)
resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'),//此resolve通常是外面定義的一個(gè)nodejs的函數(shù),用于生成絕對(duì)路徑 '@assets': resolve('src/assets') } },
上面require提到的別名、可省略擴(kuò)展名在這里配置。
至于require函數(shù)中的路徑參數(shù),具體的解析法則如下:webpack如何解析代碼模塊路徑
1.解析相對(duì)路徑
查找相對(duì)當(dāng)前模塊的路徑下是否有對(duì)應(yīng)文件或文件夾
是文件則直接加載
是文件夾則繼續(xù)查找文件夾下的 package.json 文件
有 package.json 文件則按照文件中 main 字段的文件名來查找文件
無 package.json 或者無 main 字段則查找 index.js 文件.
2.解析模塊名
查找當(dāng)前文件目錄下,父級(jí)目錄及以上目錄下的 node_modules 文件夾,看是否有對(duì)應(yīng)名稱的模塊
3.解析絕對(duì)路徑
直接查找對(duì)應(yīng)路徑的文件
正文
1.圖片處理及路徑轉(zhuǎn)換
一般由url-loader和file-loader處理。
url-loader
這個(gè)簡(jiǎn)單,把小圖片轉(zhuǎn)換成base64編碼并返回該base64編碼的字符串。即js代碼var jpg=require('./assets/a.jpg')中,如果編譯時(shí)能找到該圖片且該圖片大小小于規(guī)定值,那么url-loader返回該圖片的base64編碼,變量jpg的值將會(huì)是該圖片的base64編碼。
file-loader
file-loader將處理url-loader沒處理的那些大圖片,它會(huì)把圖片復(fù)制到指定目錄并返回public URL(參見file-loader文檔),代表編譯后運(yùn)行時(shí)該圖片的url路徑字符串。即js代碼var jpg=require('./assets/b.jpg')中,如果編譯時(shí)能找到該圖片,那么jpg的值將會(huì)是/img/b.jpg(具體取決于配置)
當(dāng)前目錄./的差異
注意css和js、html的當(dāng)前路徑不一致。css的./是指該css文件所在路徑,而js、html中的./是指瀏覽器當(dāng)前地址欄的url的路徑目錄。
2.html、js、css的處理
js中使用require函數(shù)就行,這里談一下html和css中的處理。
html中,由vue-loader提供處理(語法糖)。其默認(rèn)選項(xiàng)下,會(huì)把video、img、source標(biāo)簽的src屬性放入require函數(shù)并把結(jié)果替換到原位置。也就是: vue-loader提取這些標(biāo)簽src屬性->require函數(shù)->file-loader或url-loader處理->使用返回值進(jìn)行替換。類似的,可以右轉(zhuǎn)百度搜索 vue-loader transformToRequire 這個(gè)東西,你可以擴(kuò)展它讓其他標(biāo)簽的屬性同樣擁有該語法糖。
css中,由css-loader提供處理。類似于上面的html,css-loader會(huì)把url(./assets/b.jpg)給處理成url(/img/b.jpg),同樣通過require函數(shù)獲取處理結(jié)果。
注意,在html和css中,絕對(duì)路徑的寫法編譯時(shí)將不被處理(loader判斷),即url(/assets/b.jpg)編譯后不變。而js中require('/assets/b.jpg')編譯時(shí)將被認(rèn)為是打包本地磁盤中/assets/b.jpg文件,不存在時(shí)將編譯報(bào)錯(cuò)。
3.進(jìn)階:別名的使用
即上面提到的webpack模塊化處理,js中@/assets/a.jpg這種。
html中:可直接使用,也可使用~指示webpack這是一個(gè)模塊路徑,即src='@/assets/a.jpg'或src='~@/assets/a.jpg'都是可行的
css中,必須使用~指示webpack這是一個(gè)模塊路徑,即url(~@/assets/b.jpg)
js中,不用寫~,webpack一定對(duì)其使用模塊路徑解析。
同時(shí)注意,需要把別名字符串的部分直接包含在參數(shù)中。即
let number=1, p1='./', p2='@assets' img.src=require(`./assets/img${number}.jpg`)//正確 img.src=require(`@assets/img${number}.jpg`)//正確 img.src=require(`${p1}assets/img${number}.jpg`)//正確 img.src=require(`${p2}/img${number}.jpg`)//錯(cuò)誤
我也不知道這個(gè)是bug還是什么鬼了,有了解的大佬可以說下
4.hash和history模式
應(yīng)該都知道,即http://localhost/#/a/b/c這樣的hash模式中,html和js的./a.jpg均為http://localhost/a.jpg。而http://localhost/a/b/c這樣的history模式中,html和js的./a.jpg均為http://localhost/a/b/a.jpg,此時(shí)如果設(shè)置publicPath: './',那么請(qǐng)注意前面提到過css中./是以css文件所在目錄為起點(diǎn)的,而loader會(huì)把html的標(biāo)簽的src、css的url函數(shù)的路徑統(tǒng)一處理,此時(shí)可能會(huì)由于html、css的當(dāng)前目錄./差異導(dǎo)致某一方找不到圖片。
解決方案簡(jiǎn)單,history模式時(shí)publicPath不要用相對(duì)路徑、html或css其中一方手動(dòng)注意代碼寫法繞開loader的處理即可,邏輯搞清即可,處理方法多樣。
5.常見問題
不了解@vue/cli項(xiàng)目中file-loader的選項(xiàng)設(shè)置、不了解webpack各模板中如何間接設(shè)置file-loader的選項(xiàng)設(shè)置。
解決靠自己了,或者右轉(zhuǎn)百度,說不定直接抄過來給file-loader設(shè)置publicPath: './'恰好對(duì)上項(xiàng)目結(jié)構(gòu)而解決問題
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例,這次搭建的測(cè)試環(huán)境和開發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05vue路由跳轉(zhuǎn)攜帶參數(shù)的方式總結(jié)
我們知道在vue中每個(gè)頁面都需要在路由中聲明,下面這篇文章主要給大家介紹了關(guān)于vue路由跳轉(zhuǎn)攜帶參數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10簡(jiǎn)單學(xué)習(xí)vue指令directive
這篇文章主要和大家一起簡(jiǎn)單學(xué)習(xí)一下vue指令:directive,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-112種在vue項(xiàng)目中使用百度地圖的簡(jiǎn)單方法
在本篇文章中我們給大家整理了2種關(guān)于VUE項(xiàng)目中使用百度地圖的最簡(jiǎn)單的方法,非常實(shí)用,一起來學(xué)習(xí)下。2018-09-09對(duì)vue事件的延遲執(zhí)行實(shí)例講解
今天小編就為大家分享一篇對(duì)vue事件的延遲執(zhí)行實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08打包組件報(bào)錯(cuò):Error:Cannot?find?module?'vue/compiler-sfc&ap
最近遇到這樣的問題,vue組件庫搭建過程中使用webpack打包組件時(shí)報(bào)錯(cuò),本文給大家分享打包組件報(bào)錯(cuò):Error:?Cannot?find?module?‘vue/compiler-sfc‘的解決方法,感興趣的朋友一起看看吧2023-12-12