1.報錯原因
vue3使用vite打包 里面沒有require方法， webpack 里面有這個方法
2.解決方案
使用import 代替
*注：
資源可使用import.meta.globEager(“…/*.png”) ;
動態(tài)引入，需要給 css 路徑加括號
vite官網(wǎng)靜態(tài)資源處理 new URL(url, import.meta.url)
import.meta.url ： ESM 的原生功能，會暴露當(dāng)前模塊的 URL
與原生的 URL 構(gòu)造器 組合使用，在一個 JavaScript 模塊中，通過相對路徑我們就能得到一個被完整解析的靜態(tài)資源 URL
function test(name) {
return new URL(`../${name}.png`, import.meta.url).href
}
在生產(chǎn)構(gòu)建時，Vite 才會進(jìn)行必要的轉(zhuǎn)換（保證 URL 在打包和資源哈希后仍指向正確的地址）文章來源：http://www.zghlxwxcb.cn/news/detail-724110.html
注意這個 URL 字符串必須是靜態(tài)的，這樣才能分析
否則代碼將被原樣保留，因而在 build.target 不支持 import.meta.url 時會導(dǎo)致運行時錯誤文章來源地址http://www.zghlxwxcb.cn/news/detail-724110.html
Vite 不會轉(zhuǎn)換這個
const url = new URL(imagePath, import.meta.url).href
到了這里，關(guān)于vue3 使用require報錯：require is not defined的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
