在vue模版中不能直接使用下面這種寫法引入靜態(tài)資源, 因?yàn)関ite不會(huì)自動(dòng)對(duì)其中的路徑做處理. 其中path是一個(gè)靜態(tài)資源路徑如: '/assets/hh.jpg', 不是通過import引入的資源.
<div :style="{ backgroundImage: 'url(' + path+ ')' }">
Vite會(huì)自動(dòng)轉(zhuǎn)換靜態(tài)資源路徑的幾種情況:
1圃验、CSS中的靜態(tài)資源路徑
2、img中的src
3、import() 語(yǔ)句引入的靜態(tài)資源
4袜茧、URL
要解決上面模版中靜態(tài)資源找不到的問題,
1嗤朴、將靜態(tài)資源放置于public目錄中, vite不會(huì)對(duì)public目錄下資源做處理, 因此還能引用到. 但是這會(huì)導(dǎo)致文件指紋(vite生成的文件hash后綴)消失
2惠啄、使用import() 動(dòng)態(tài)引入資源
function handleChange(val) {
import(`./assets/${val}.jpg`).then(res => {
path.value = res.default
})
}
但是如果path比較多, 這種方法會(huì)打包生成多個(gè)文件, handleChange時(shí)候會(huì)觸發(fā)請(qǐng)求
3场仲、使用URL
function handleChange(val) {
const url = new URL('./assets/${val}.jpg', import.meta.url)
path.value = url
}
import.meta.url指 的是當(dāng)前模塊的路徑, 這種方法, 打包結(jié)果不會(huì)生成多個(gè)文件, 文件指紋也不會(huì)丟失.
