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ù)使用上面方法會報錯 具體細(xì)節(jié)未深究
解決方案：
import.meta.globEager("../../assets/authentication/*.png")?vue3項(xiàng)目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 的原生功能，會暴露當(dāng)前模塊的 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)代瀏覽器中能夠原生使用 - 實(shí)際上，Vite 并不需要在開發(fā)階段處理這些代碼！
這個模式同樣還可以通過字符串模板支持動態(tài) URL：
function getImageUrl(name) {
? return new URL(`./dir/${name}.png`, import.meta.url).href
}在生產(chǎn)構(gòu)建時，Vite 才會進(jìn)行必要的轉(zhuǎn)換保證 URL 在打包和資源哈希后仍指向正確的地址。
然而，這個 URL 字符串必須是靜態(tài)的，這樣才好分析。
否則代碼將被原樣保留、因而在 build.target 不支持 import.meta.url 時會導(dǎo)致運(yùn)行時錯誤。
// Vite 不會轉(zhuǎn)換這個 const imgUrl = new URL(imagePath, import.meta.url).href
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.JS入門教程之列表渲染,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue項(xiàng)目熱更新的坑及解決方案，具有很好的參考價值，希望對的大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3中vite使用sass的配置方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
這篇文章主要介紹了vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域的相關(guān)資料，及代理跨域的概念原理,需要的朋友可以參考下2018-04-04
element的el-table自定義最后一行的實(shí)現(xiàn)代碼
最后一行要顯示一些其他結(jié)果,用的是element? ui 自帶的數(shù)據(jù)總計(jì)的屬性；返回一個數(shù)組,會按下標(biāo)進(jìn)行展示,這篇文章主要介紹了element的el-table自定義最后一行的實(shí)現(xiàn)代碼,需要的朋友可以參考下2024-03-03
vue2.0 資源文件assets和static的區(qū)別詳解
這篇文章主要介紹了vue2.0 資源文件assets和static的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序
這篇文章主要介紹了Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們詳細(xì)介紹了數(shù)據(jù)準(zhǔn)備、關(guān)系映射、點(diǎn)擊事件等關(guān)鍵步驟,需要的朋友可以參考下2023-09-09
Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作,結(jié)合實(shí)例形式分析了vue.js使用Watch針對數(shù)組、對象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
詳解Vue實(shí)戰(zhàn)指南之依賴注入(provide/inject)
這篇文章主要介紹了詳解Vue實(shí)戰(zhàn)指南之依賴注入(provide/inject)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
大家在寫系統(tǒng)的時候,會有這樣的需求：點(diǎn)擊修改后把需要修改的數(shù)據(jù)放入表單,其中會有下拉單選框、下拉多選框,展示下拉框單選框內(nèi)的數(shù)據(jù)只需要將所選id賦值給下拉框綁定的值就可以了,下面給大家分享vue elementUI下拉框值無法選中問題,感興趣的朋友一起看看吧2024-03-03