store中需要引入很多modules/*.js , 可以使用require.context

store中需要引入很多modules/*.js , 可以使用require.context

require.context()

require.context() MDN

require.context(directory, useSubdirectories, regExp)
// 例子
require.context('./test', false, /\.test\.js$/);
// （创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。

• directory：要搜索的目录
• 是否搜索其子目录
• 匹配文件的正则表达式

一个 context module 会导出一个（require）函数，此函数可以接收一个参数：request。 此导出函数有三个属性： resolve, keys, id 。

• resolve 是一个函数，返回request 被解析后得到的模块id；

• keys 也是一个函数，返回一个数组，由所有可能彼此 context module 处理的请求组成；

• id 是 context module 里面所包含的模块 id. 它可能在你使用 module.hot.accept 时会用到。

  例子：引入一个文件夹下面的所有js文件

  function importAll (r) {
      r.keys().forEach(r);
  }
  importAll(require.context('../components/', true, '/\.js$/'));
  

  var cache = {};
  
  function importAll (r) {
    r.keys().forEach(key => cache[key] = r(key));
  }
  
  importAll(require.context('../components/', true, /\.js$/));
  // 在构建时(build-time)，所有被 require 的模块都会被填充到 cache 对象中。
  

原：store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import permission from './modules/permission'
import user from './modules/user'
import tagsView from './modules/tagsView'
import roleManage from './modules/roleManage'
import userManage from './modules/userManage'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    permission,
    user,
    tagsView,
    roleManage,
    userManage
  },
  getters,
  strict: false
})

export default store

改：可以使用require.context

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

const modulesFiles = require.context('./modules', false, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

Vue.use(Vuex)

const store = new Vuex.Store({
  modules,
  getters,
  strict: false
})

export default store

好文章推荐 - 掘金 - 加快Vue项目的开发速度