网站建设的优点和缺点,建筑工程培训机构,网站形象首页flash,个人怎么建立网站vitevue3ts中使用require.context|报错require is not defined|获取文件夹中的文件名 目录 vitevue3ts中使用require.context|报错require is not defined|获取文件夹中的文件名一、问题背景二、报错原因三、解决方法 一、问题背景
如题在vitevue3ts中使用required.context时报…vitevue3ts中使用require.context|报错require is not defined|获取文件夹中的文件名 目录 vitevue3ts中使用require.context|报错require is not defined|获取文件夹中的文件名一、问题背景二、报错原因三、解决方法 一、问题背景
如题在vitevue3ts中使用required.context时报错如下
代码需求为获取文件夹中的后缀为.vue的文件相对路径
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, )})
})报错如下 按照网上搜到的解决方案在代码中加入两行代码如下后产生新的报错如下
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 修改后可用的代码如下
// 获取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 resultconsole.log(vue files,this.vue_files);
}打印出的files格式如下如果想获得文件的相对路径则用Object.keys()获取到files对象的key值即可
注/**的意思是匹配所有文件夹及里面的子文件夹相当于reqiure.context中第二个参数useSubdirectories true的作用。
/**的意思是所有文件夹及里面的子文件夹
/*是所有文件夹不含子文件夹
