[src-store-index.js]：require.context()的用法

Easonflowers

已于 2023-11-27 18:49:29 修改

阅读量25

点赞数

分类专栏： VUE学习文章标签：前端 vue.js

于 2023-11-27 18:47:01 首次发布

原文链接：https://blog.csdn.net/weixin_43340372/article/details/121952845

版权

VUE学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一般用于加载某个目录下的多个文件，如：

const modulesFiles = require.context("./modules", true, /\.js$/)
require.context()接收三个参数，第一个参数是要加载的文件目录地址，第二个参数是true或false，表示是否需要加载子目录，第三个参数是个正则表达式，表示要加载哪些文件，上面代码表示要加载components目录下的.js文件。
应用：

加载store中的modules为例：

const modules = require.context('./modules', true, /\.js$/).keys().reduce((modules, modulePath) => {
    // set './app.js' => 'app'
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
    const value = require.context('./modules', true, /\.js$/)(modulePath);
    modules[moduleName] = value.default;
    return modules;
}, {});
 
const store = new Vuex.Store({
    modules
});

通过reduce方法循环，将每个js中export default出的对象放在modules中并return，最后将modules丢到Vuex.Strore中。

项目目录：