單一資源處理
將資源引入為 URL
服務(wù)時(shí)引入一個(gè)靜態(tài)資源會(huì)返回解析后的公共路徑：
// 引用
import CaseBG from '@/assets/images/20230313144252.png'
導(dǎo)入既可以使用絕對(duì)公共路徑（基于開(kāi)發(fā)期間的項(xiàng)目根路徑），也可以使用相對(duì)路徑。
// 使用
<img alt='' :src=CaseBG />
vite 生產(chǎn)構(gòu)建后文件名會(huì)哈希，如圖：
多個(gè)資源處理（動(dòng)態(tài)）
new URL(url, import.meta.url)
import.meta.url 是一個(gè) ESM 的原生功能，會(huì)暴露當(dāng)前模塊的 URL。將它與原生的 URL 構(gòu)造器 組合使用，在一個(gè) JavaScript 模塊中，通過(guò)相對(duì)路徑我們就能得到一個(gè)被完整解析的靜態(tài)資源 URL：
// 引用
const CaseBG = new URL('@/assets/images/20230313144252.png', import.meta.url).href
// 使用
<img alt='' :src=CaseBG />
如果想要?jiǎng)討B(tài)引入圖片資源，可以通過(guò)字符串模板封裝一個(gè)方法：
/**
* 動(dòng)態(tài)引入圖片資源
* @param {String} name 圖片名稱/路徑
* @returns 圖片url
*/
export const getImageUrl = (name) => {
return new URL(`../assets/images/${name}`, import.meta.url).href
}
需要注意的是：
- 如果
name想要傳路徑的話，比如圖片資源在images下不同的文件夾中，即home/20230313144252.png，那這個(gè)路徑就需要傳文件后綴。
<img
alt=""
:src="getImageUrl('home/20230314145534.png')"
style="width: 214px; height: 46px;"
/>
寫成這樣的格式才能正確顯示。
- 如果
name只是傳文件名的話，就可以把后綴直接寫在封裝的方法中：
export const getImage = (name) => (
new URL(`../assets/images/${name}.png`, import.meta.url).href
)
<img
alt=""
:src="getImage('20230313094342')"
style="width: 214px; height: 46px;"
/>
這樣的話，就可以省略文件后綴了。
需要注意的是：
在生產(chǎn)構(gòu)建時(shí)，Vite 才會(huì)進(jìn)行必要的轉(zhuǎn)換保證 URL 在打包和資源哈希后仍指向正確的地址。然而，這個(gè) URL 字符串必須是靜態(tài)的，這樣才好分析。否則代碼將被原樣保留、因而在 build.target 不支持 import.meta.url 時(shí)會(huì)導(dǎo)致運(yùn)行時(shí)錯(cuò)誤。
兩個(gè)知識(shí)點(diǎn)：
new URL()
創(chuàng)建并返回一個(gè) URL 對(duì)象，該 URL 對(duì)象引用使用絕對(duì) URL 字符串，相對(duì) URL 字符串和基本 URL 字符串指定的 URL。
import.meta
import.meta 是一個(gè)給 JavaScript 模塊暴露特定上下文的元數(shù)據(jù)屬性的對(duì)象。它包含了這個(gè)模塊的信息，比如說(shuō)這個(gè)模塊的 URL。
Public 目錄
另外說(shuō)一下一些特殊情況，可以解決路徑問(wèn)題。
如果有下列這些資源：
- 不會(huì)被源碼引用（例如
robots.txt） - 必須保持原有文件名（沒(méi)有經(jīng)過(guò)
hash） - 等等一些壓根不想引入該資源，只是想得到其
URL。
那么就可以將該資源放在指定的 public 目錄中，它應(yīng)位于項(xiàng)目根目錄。該目錄中的資源在開(kāi)發(fā)時(shí)能直接通過(guò) / 根路徑訪問(wèn)到，并且打包時(shí)會(huì)被完整復(fù)制到目標(biāo)目錄的根目錄下。
目錄默認(rèn)是 <root>/public，但可以通過(guò) publicDir 選項(xiàng) 來(lái)配置。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-691912.html
請(qǐng)注意：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-691912.html
- 引入
public中的資源永遠(yuǎn)應(yīng)該使用根絕對(duì)路徑 —— 舉個(gè)例子，public/icon.png應(yīng)該在源碼中被引用為/icon.png。 -
public中的資源不應(yīng)該被JavaScript文件引用。
到了這里，關(guān)于Vite靜態(tài)資源處理——?jiǎng)討B(tài)引入圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
