這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)vue圖片路徑的實(shí)現(xiàn)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計(jì)師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計(jì)技術(shù)配合操作的協(xié)同工作。成都創(chuàng)新互聯(lián)專業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站制作(企業(yè)站、自適應(yīng)網(wǎng)站建設(shè)、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗(yàn)的提升,我們力求做到極致!

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è)簡單，把小圖片轉(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ò)誤

上述就是小編為大家分享的vue圖片路徑的實(shí)現(xiàn)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。