vue-cli 项目 循环读取文件夹内所有文件

require.context

实现动态读取文件内容，主要依靠 webpack 的 require.context 方法，require.context 方法有三个参数：

1. directory {String} - 读取文件的路径
2. useSubdirectories {Boolean} - 是否遍历文件的子目录
3. regExp {RegExp} - 匹配文件的正则

语法:

/**
 * require.context
 * @param {String} directory  读取文件的路径
 * @param {Boolean} useSubdirectories  是否遍历文件的子目录
 * @param {RegExp} regExp  匹配文件的正则
 */
require.context(directory, useSubdirectories = false, regExp = /^.//);

// 假设 assets/js 文件夹下有 test.js 文件
// 匹配以 .js 结尾的文件
const files = require.context('@/assets/js/', false, /.js$/) 

// 遍历输出匹配结果
files.keys().forEach(path=> {
	console.log(path); // ./test.js
    var content = files(path).default // 获取文件 export default 内容
})

参考

使用require.context实现前端工程自动化