vue3+vite+ts使用require.context問題
更新時(shí)間：2023年05月17日 10:44:16 作者：V。on
這篇文章主要介紹了vue3+vite+ts使用require.context問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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-for時(shí)為什么不能用index作為key
這篇文章主要介紹了vue中使用v-for時(shí)為什么不能用index作為key，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue同個(gè)按鈕控制展開和折疊同個(gè)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue Antd 輸入框Input自動(dòng)聚焦方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
axios請(qǐng)求頭設(shè)置常見Content-Type和對(duì)應(yīng)參數(shù)的處理方式
這篇文章主要介紹了axios請(qǐng)求頭設(shè)置常見Content-Type和對(duì)應(yīng)參數(shù)的處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了計(jì)算屬性和偵聽器，文章以介紹計(jì)算屬性、偵聽器的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-11-11
這篇文章主要介紹了vue3無法顯示element-plus問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue組件傳值異步問題子組件拿到數(shù)據(jù)較慢解決
這篇文章主要為大家介紹了Vue組件傳值異步中子組件拿到數(shù)據(jù)較慢的問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
這篇文章主要介紹了Vue router安裝及使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
對(duì)類Vue的MVVM前端庫的實(shí)現(xiàn)代碼
這篇文章主要介紹了對(duì)類Vue的MVVM前端庫的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09