Vite+vue3打包后報(bào)錯(cuò) Failed to construct ‘URL‘: Invalid URL
網(wǎng)上查資料解決方式是:
build: {
target: 'es2020'
},
optimizedeps: {
esbuildoptions: {
target: 'es2020'
}
},
這種解決方式在高版本瀏覽器是可以的,但是在chrome的75版本是不可以的。如果不管低版本瀏覽器奴烙,以上方法就夠用了秕硝,下面是從本質(zhì)上去解決問題蚕断。
這個(gè)bug是由于我們在img標(biāo)簽引入靜態(tài)圖片的時(shí)候使用了:new URL(路徑, import.meta.url).href
知識(shí)點(diǎn):new URL 第一個(gè)參數(shù)是 路徑翻斟,不是字符串
報(bào)錯(cuò)原因分析:
在其他地方配置了new URL 第一個(gè)變量的參數(shù)座掘,定義了一個(gè)路徑曲聂,雖然我們認(rèn)為他是路徑霹购,實(shí)際上對(duì)于代碼來說他就是一個(gè)字符串
解決方法:
在配置的位置加上http 地址前綴,比如location.origin + 地址 即可 或者
//在全局window定義了一個(gè)url
window.url = '/img/bg.png'
<img src="theImg"/>
let theImg = new URL( location.origin + window.url , import.meta.url).href