vue3+vite+ts使用require.context問題
vue3+vite+ts使用require.context
在vue3+vite+ts框架中使用require.context是會(huì)報(bào)錯(cuò)的。
例如如下代碼：
const req = require.context('./ts', false, /\.ts$/);
console.log(req);就會(huì)得到報(bào)錯(cuò)：
那么在vue3+vite+ts中，如何找到對(duì)應(yīng)的方法呢？
就可以使用 import.meta.globEage或者 import.meta.glob方法了。
import.meta.glob 為動(dòng)態(tài)導(dǎo)入，構(gòu)建時(shí)，會(huì)分離為獨(dú)立的 chunk;而import.meta.globEager為直接引入。
const utilFuns: any = {};
const files = import.meta.globEager('./*.ts');
Object.keys(files).forEach((fileName) => {
const name = fileName.replace(/\.\/|\.ts/g, '');
utilFuns[name] = files[fileName].default;
});
export default utilFuns;而直接使用require.context時(shí)，則如下操作即可：
const utilFuns: any = {};
const files = require.context('./', false, /\.ts$/);
files.keys().forEach((key: any) => {
const name = key.replace(/\.\/|\.ts/g, '');
utilFuns[name] = files(key).default;
});
export default utilFuns;vue3+vite+Ts require報(bào)錯(cuò)
解決辦法
使用import語法。在vite中，是不支持require寫法的，require是屬于webpack的寫法。
報(bào)錯(cuò)點(diǎn)及寫法：
解決寫法：
通過import語法，將圖片等資源文件引入頁面，之后就可以在頁面中直接使用該變量
import defaultImg from '@/assets/img/default.png'
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用v-model實(shí)現(xiàn)父子組件傳值之子父組件同步更新方式
文章主要介紹了Vue2和Vue3中父子組件間通過props和emit實(shí)現(xiàn)雙向綁定的方法,Vue2中,子組件通過props接收值,通過$emit觸發(fā)change事件修改父組件數(shù)據(jù)；Vue3中方法類似,但語法略有不同2026-05-05
一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解
這篇文章主要為大家介紹了一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue3中使用router4 keepalive的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案
這篇文章主要介紹了Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
vue3使用vue3-print-nb實(shí)現(xiàn)區(qū)域打印功能
這篇文章主要給大家介紹了關(guān)于vue3使用vue3-print-nb實(shí)現(xiàn)區(qū)域打印功能的相關(guān)資料,在日常操作中,相信很多人在Vue怎么用插件實(shí)現(xiàn)打印功能問題上存在疑惑,需要的朋友可以參考下2023-07-07
Vue.js系列之項(xiàng)目結(jié)構(gòu)說明(2)
這篇文章主要介紹了Vue.js系列之項(xiàng)目結(jié)構(gòu)說明(2)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-01-01
Vue項(xiàng)目中通過路由守衛(wèi)實(shí)現(xiàn)自動(dòng)取消Pending請(qǐng)求功能
現(xiàn)代Web應(yīng)用中,當(dāng)用戶在頁面間快速切換時(shí),常常會(huì)遇到一些正在進(jìn)行的網(wǎng)絡(luò)請(qǐng)求繼續(xù)執(zhí)行的問題,本文將介紹如何在Vue項(xiàng)目中通過路由守衛(wèi)實(shí)現(xiàn)自動(dòng)取消pending請(qǐng)求的功能,提高應(yīng)用的性能和用戶體驗(yàn),需要的朋友可以參考下2026-04-04
這篇文章主要介紹了Vue中使用Datav如何完成大屏基本布局問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了淺談vue項(xiàng)目,訪問路徑#號(hào)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08