vue3中require報錯require is not defined問題及解決
更新時間：2023年06月08日 09:38:28 作者：Web_Lys
這篇文章主要介紹了vue3中require報錯require is not defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3 require報錯require is not defined
vue2中使用
? ? const path = require("path")
? ? const files = require.context("../module", true, /\index.vue$/)
? ? files.keys().forEach(key => {
? ? ? ? const name = path.dirname(key).slice(2)
? ? ? ? that.$options.components[name] = require('../module/' + name).default
? ? })vue3使用方法
vue3繼續(xù)使用上面方法會報錯 具體細節(jié)未深究
解決方案：
import.meta.globEager("../../assets/authentication/*.png")?vue3項目require引入css文件報錯：require is not defined
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 構(gòu)造器 組合使用，在一個 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)構(gòu)建時，Vite 才會進行必要的轉(zhuǎn)換保證 URL 在打包和資源哈希后仍指向正確的地址。
然而，這個 URL 字符串必須是靜態(tài)的，這樣才好分析。
否則代碼將被原樣保留、因而在 build.target 不支持 import.meta.url 時會導(dǎo)致運行時錯誤。
// Vite 不會轉(zhuǎn)換這個 const imgUrl = new URL(imagePath, import.meta.url).href
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
cordova+vue+webapp使用html5獲取地理位置的方法
這篇文章主要介紹了2019-07-07
雙向數(shù)據(jù)綁定原理主要運用了發(fā)布訂閱模式來實現(xiàn)的，通過Object.defineProperty對數(shù)據(jù)劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了解決VantUI popup 彈窗不彈出或無蒙層的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與配置教程的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-06-06
基于vue和react的spa進行按需加載的實現(xiàn)方法
這篇文章主要介紹了基于vue和react的spa進行按需加載,需要的朋友可以參考下2018-09-09
這篇文章主要給大家介紹了關(guān)于vue組件入門知識的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了Vue中實現(xiàn)過渡動畫效果示例代碼,Vue中為我們提供一些內(nèi)置組件和對應(yīng)的API來完成動畫，利用它們我們可以方便的實現(xiàn)過渡動畫效果，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue修改Dom不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復(fù)初始數(shù)據(jù)this.$data，this.$options.data()解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vuex-Persist 是一個用于在 Vuex 中實現(xiàn)持久化狀態(tài)的庫,它可以用來解決應(yīng)用程序在刷新瀏覽器或關(guān)閉頁面后丟失 Vuex store 中狀態(tài)的問題,本文給大家介紹vuex-persist 可以用來干什么,感興趣的朋友一起看看吧2023-11-11