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