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)建時，會分離為獨立的 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的寫法。
報錯點及寫法：
解決寫法：
通過import語法，將圖片等資源文件引入頁面，之后就可以在頁面中直接使用該變量
import defaultImg from '@/assets/img/default.png'
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中使用v-for時為什么不能用index作為key，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue同個按鈕控制展開和折疊同個事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue Antd 輸入框Input自動聚焦方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue項目實現(xiàn)圖形驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
axios請求頭設(shè)置常見Content-Type和對應(yīng)參數(shù)的處理方式
這篇文章主要介紹了axios請求頭設(shè)置常見Content-Type和對應(yīng)參數(shù)的處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了計算屬性和偵聽器，文章以介紹計算屬性、偵聽器的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對你有所幫助2021-11-11
這篇文章主要介紹了vue3無法顯示element-plus問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue組件傳值異步問題子組件拿到數(shù)據(jù)較慢解決
這篇文章主要為大家介紹了Vue組件傳值異步中子組件拿到數(shù)據(jù)較慢的問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
這篇文章主要介紹了Vue router安裝及使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-12-12
這篇文章主要介紹了對類Vue的MVVM前端庫的實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09