---

靜態(tài)資源與打包規(guī)則

介紹
Vite腳手架在打包代碼的時(shí)候，會(huì)把源代碼里對(duì)于靜態(tài)資源的訪問(wèn)路徑轉(zhuǎn)換為打包后靜態(tài)資源文件的路徑。主要的區(qū)別是文件指紋，即打包后的文件會(huì)帶上一個(gè)hash值，用于區(qū)分不同版本的文件。

---

文件指紋的作用
當(dāng)前端項(xiàng)目更新之后，重新打包、部署，由于文件指紋的存在，客戶端檢測(cè)到文件名不同，則會(huì)下載新版的文件。如果沒(méi)有文件指紋，且新舊版文件名一致，客戶端會(huì)讀緩存，而不能及時(shí)地拿到新版文件。

---

動(dòng)態(tài)訪問(wèn)靜態(tài)資源

動(dòng)態(tài)訪問(wèn)靜態(tài)資源通常導(dǎo)致讀取不到文件，因?yàn)樵创a中使用的路徑是src，而打包之后靜態(tài)資源帶上了文件指紋，代碼中的路徑卻沒(méi)有隨之改變。

---

如下情景屬于對(duì)靜態(tài)資源的動(dòng)態(tài)訪問(wèn)，也就是說(shuō)使用了插值語(yǔ)法，而變量值只有在代碼執(zhí)行中才被確定。
1、css中的background-image: url();使用v-bind動(dòng)態(tài)地綁定一張圖片的路徑；
2、template中節(jié)點(diǎn)的style，在background-image:url();使用插值語(yǔ)法；
3、img節(jié)點(diǎn)的src屬性使用動(dòng)態(tài)綁定傳遞圖片路徑。

---

直接導(dǎo)入

import img1 from './assets/1.jpg';
import img2 from './assets/2.jpg';const imgName = ref('');function handleChange(val){if(val === 1) {imgName.value = img1;} else if(val === 2) {imgName.value = img2;}
}

將所有可能用到的圖片都導(dǎo)入，并配合if語(yǔ)句實(shí)現(xiàn)動(dòng)態(tài)切換。
缺點(diǎn)是代碼臃腫，難以維護(hù)。

---

將靜態(tài)資存放在public目錄中

存儲(chǔ)在public目錄的靜態(tài)資源文件會(huì)原封不動(dòng)地被打包到dist文件夾中，不用擔(dān)心文件名發(fā)生變化，在源代碼中直接使用絕對(duì)路徑訪問(wèn)靜態(tài)資源即可：/assets/1.jpg。
缺點(diǎn)是失去了文件指紋帶來(lái)的好處，后期如果靜態(tài)資源被替換了，但是文件名沒(méi)變，客戶端仍讀取緩存，無(wú)法及時(shí)獲取最新版的靜態(tài)資源。

---

動(dòng)態(tài)導(dǎo)入

const imgName = ref('');
const url = ref('');watchEffect(async () => {const module = await import('./assets/${imgName.value}.jpg');console.log(module);
});

Vite腳手架在靜態(tài)分析代碼的時(shí)候，讀取到動(dòng)態(tài)導(dǎo)入import()，且內(nèi)部是模板字符串，只有一部分內(nèi)容是動(dòng)態(tài)的，那么Vite會(huì)自動(dòng)將符合./assets/*.jpg路徑格式的靜態(tài)資源全部進(jìn)行打包。
在打包的時(shí)候，不僅會(huì)打包所有符合情況的靜態(tài)資源，還會(huì)打包出對(duì)應(yīng)的.js文件。import()語(yǔ)句實(shí)際上是導(dǎo)入.js文件，而.js文件又默認(rèn)導(dǎo)出打包后的靜態(tài)資源文件路徑。

---

---

缺點(diǎn)是打包結(jié)果多出許多.js文件和異步導(dǎo)入。

---

URL構(gòu)造函數(shù)

使用計(jì)算屬性computed和URL。

const url = computed(()=>{const obj = new URL(`./assets/${imgName.value}.jpg`, import.meta.url);return obj.pathname;
});

URL傳入兩個(gè)參數(shù)：文件路徑和基準(zhǔn)路徑。
返回URL實(shí)例對(duì)象的pathname屬性，即是打包后的文件路徑。

<div :style="{backgroundImage: url(url)}"></div>

---

原理
單文件組件在進(jìn)行打包的時(shí)候，會(huì)分析內(nèi)容。

---

img元素和url函數(shù)
1、<img>標(biāo)簽的src屬性；
2、css的background-image屬性的url()函數(shù)；
如果是靜態(tài)的，則會(huì)進(jìn)行路徑轉(zhuǎn)換。

---

import()和new URL()
只能是某一個(gè)部分是動(dòng)態(tài)，通常是模板字符串。這種情況下會(huì)把指定文件夾下面的指定格式的文件全部打包，并進(jìn)行路徑轉(zhuǎn)換。import()會(huì)生成額外的.js文件，new URL()不會(huì)。

---

結(jié)束語(yǔ)

以上的方法中，使用URL的方法最優(yōu)。
支持動(dòng)態(tài)導(dǎo)入；
保留文件指紋；
不會(huì)產(chǎn)生額外的.js文件；
同步代碼。

---

實(shí)踐與坑

待更新…

---

附文

待更新…