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