vite+vue3+ts中使用require.context | 报错require is not defined | 获取文件夹中的文件名

vite+vue3+ts中使用require.context|报错require is not defined|获取文件夹中的文件名

目录

一、问题背景

如题在vite+vue3+ts中使用required.context时报错如下:

代码:需求为获取文件夹中的后缀为.vue的文件相对路径

js 复制代码
const files = require.context('@/views', true, /\.vue$/)
const result = []
files.keys().forEach((key) => {
    result.push({
        label: key.replace(/(\.\/|\.vue)/g, ''),
        value: key.replace(/(\.\/|\.vue)/g, '')
    })
})

报错如下

按照网上搜到的解决方案在代码中加入两行代码(如下)后,产生新的报错如下:

js 复制代码
import { createRequire } from 'module';
const require = createRequire(import.meta.url);

二、报错原因

require.context()webpack用来查找文件内容的,在vite中不适用。webpack官网对require.context的详解如下:

网址 : requirecontext

三、解决方法

vite中可以使用import.meta.glob()方法实现导入资源,注意import.meta.globEager()已弃用。

官网详解

网址import.meta.glob

修改后可用的代码如下

js 复制代码
// 获取src/pages下的vue文件地址
searchFiles () {
    const files = import.meta.glob( '@/pages/**/*.vue', { eager: true })
    console.log('files',files);
    const result = []
    Object.keys(files).forEach(fileName=>{
        // console.log('fileName',fileName);
        result.push({
            label: fileName.replace(/(\.\/|\.vue)/g, ''),
            value: fileName.replace(/(\.\/|\.vue)/g, '')
        })
    })
    this.vue_files = result
    console.log('vue files',this.vue_files);
}

打印出的files格式如下:如果想获得文件的相对路径,则用Object.keys()获取到files对象的key值即可

注:/**的意思是匹配所有文件夹及里面的子文件夹,相当于reqiure.context中第二个参数useSubdirectories = true的作用。

复制代码
/**的意思是所有文件夹及里面的子文件夹
/*是所有文件夹,不含子文件夹
相关推荐
( ̄(工) ̄)霸天下20 分钟前
Typescript速通教程
前端·javascript·typescript
妮妮喔妮1 小时前
图片上传 el+node后端+数据库
javascript·数据库·vue.js
求知若渴,虚心若愚。4 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj5 小时前
最新的前端技术和趋势(2025)
前端
paopaokaka_luck5 小时前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts
一只小风华~5 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟6 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
仰望星空的凡人7 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus8 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉8 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js