Vue3項(xiàng)目require引入css文件報(bào)錯(cuò):require is not defined問題及解決
更新時(shí)間：2025年12月06日 09:10:21 作者：acheding
Vue3項(xiàng)目中使用require引入CSS文件報(bào)錯(cuò),建議使用import替代,對(duì)于動(dòng)態(tài)引入,確保路徑正確,Vite官網(wǎng)推薦使用new URL(url, import.meta.url)來處理靜態(tài)資源,該方法可在現(xiàn)代瀏覽器中原生使用,在生產(chǎn)構(gòu)建時(shí),Vite會(huì)進(jìn)行必要的轉(zhuǎn)換以保證URL的正確性
Vue3項(xiàng)目require引入css文件報(bào)錯(cuò)
1.用 import 代替 require
如果是在 if 語句里動(dòng)態(tài)引入，別忘了給 css 路徑加括號(hào)。
2.vite官網(wǎng)靜態(tài)資源處理
new URL(url, import.meta.url)
import.meta.url 是一個(gè) ESM 的原生功能，會(huì)暴露當(dāng)前模塊的 URL。
將它與原生的 URL 構(gòu)造器 組合使用，在一個(gè) JavaScript 模塊中，通過相對(duì)路徑我們就能得到一個(gè)被完整解析的靜態(tài)資源 URL：
const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl
這在現(xiàn)代瀏覽器中能夠原生使用 - 實(shí)際上，Vite 并不需要在開發(fā)階段處理這些代碼！
這個(gè)模式同樣還可以通過字符串模板支持動(dòng)態(tài) URL：
function getImageUrl(name) {
return new URL(`./dir/${name}.png`, import.meta.url).href
}在生產(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ò)誤。
// Vite 不會(huì)轉(zhuǎn)換這個(gè) const imgUrl = new URL(imagePath, import.meta.url).href
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中如何監(jiān)聽url地址欄參數(shù)變化問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue插槽slot詳細(xì)介紹(對(duì)比版本變化,避免踩坑)
Vue中的Slot對(duì)于編寫可復(fù)用可擴(kuò)展的組件是再合適不過了,下面這篇文章主要給大家介紹了關(guān)于Vue插槽slot詳細(xì)介紹的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
Canvas是HTML5中新增的元素,專門用來繪制圖形,下面這篇文章主要給大家介紹了關(guān)于Vue使用Canvas生成隨機(jī)大小且不重疊圓的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
Vue Cli 3項(xiàng)目使用融云IM實(shí)現(xiàn)聊天功能的方法
這篇文章主要介紹了Vue Cli 3項(xiàng)目 使用融云IM實(shí)現(xiàn)聊天功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
在看這篇文章的幾點(diǎn)要求：需要你先知道Vuex與Vue-Router是個(gè)什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vuex與Vue-Router的基本使用后再回來看這篇文章2022-11-11
什么是vue.js事件處理器？這篇文章主要介紹了vue.js事件處理器的相關(guān)資料2017-03-03
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細(xì), 具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2023-11-11
這篇文章主要介紹了Vue.js 中的實(shí)用工具方法，本文是小編日常開發(fā)中常用的一些工具方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue相關(guān)配置文件詳解及多環(huán)境配置詳細(xì)步驟
這篇文章主要介紹了vue相關(guān)配置文件詳解及多環(huán)境配置的教程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
利用VUE框架，實(shí)現(xiàn)列表分頁功能示例代碼
本篇文章主要介紹了利用VUE框架，實(shí)現(xiàn)列表分頁功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-01-01