Vue SPA构建时如何遍历modules文件夹整合模块配置？

针对你的需求，直接用Webpack提供的require.contextAPI就能实现构建阶段自动遍历模块、整合配置的效果，完全符合静态打包的要求，不需要动态安装模块。下面分路由和Store两部分给出具体实现：

一、路由自动整合（src/router/index.js） #

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入你的基础路由（非模块路由）
import baseRoutes from './base-routes'

Vue.use(VueRouter)

// 初始化模块路由数组
const moduleRoutes = []
// 遍历src/modules下所有route.js文件
const routeCtx = require.context('@/modules', true, /route\.js$/)

routeCtx.keys().forEach(key => {
  // 导入当前模块的路由配置
  const routes = routeCtx(key).default || routeCtx(key)
  // 校验是数组后合并到总路由
  if (Array.isArray(routes)) {
    moduleRoutes.push(...routes)
  }
})

// 合并基础路由和模块路由
const allRoutes = [...baseRoutes, ...moduleRoutes]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: allRoutes
})

export default router

每个模块的route.js需要导出路由数组，示例：

// src/modules/user/route.js
export default [
  {
    path: '/user/login',
    name: 'UserLogin',
    component: () => import('./views/Login.vue')
  },
  {
    path: '/user/profile',
    name: 'UserProfile',
    component: () => import('./views/Profile.vue')
  }
]

二、Vuex Store自动整合（src/store/index.js） #

import Vue from 'vue'
import Vuex from 'vuex'
// 导入你的基础Store模块（非模块Store）
import baseModules from './base-modules'

Vue.use(Vuex)

// 初始化模块Store容器
const moduleStores = {}
// 遍历src/modules下所有store.js文件
const storeCtx = require.context('@/modules', true, /store\.js$/)

storeCtx.keys().forEach(key => {
  // 提取模块名称（比如从'./user/store.js'中取出'user'）
  const moduleName = key.split('/')[1]
  // 导入当前模块的Store配置
  const storeModule = storeCtx(key).default || storeCtx(key)
  // 将模块存入容器，自动启用命名空间（建议每个模块都加namespaced: true）
  if (storeModule) {
    moduleStores[moduleName] = storeModule
  }
})

export default new Vuex.Store({
  modules: {
    ...baseModules,
    ...moduleStores
  }
})

每个模块的store.js需要导出Vuex模块对象，示例：

// src/modules/user/store.js
export default {
  namespaced: true,
  state: () => ({
    userInfo: null
  }),
  mutations: {
    SET_USER_INFO(state, info) {
      state.userInfo = info
    }
  },
  actions: {
    async fetchUserInfo({ commit }) {
      // 接口请求逻辑
      const res = await api.getUserInfo()
      commit('SET_USER_INFO', res.data)
    }
  }
}

补充说明 #

• require.context是Webpack内置的静态分析API，构建时会自动扫描所有匹配的文件并打包，完全是静态处理，不会在运行时动态加载。
• 如果需要整合其他类型的配置文件（比如api.js、directive.js），只需要修改require.context的第三个参数（匹配正则）即可，逻辑和上面一致。
• 建议每个模块的路由和Store都保持独立的结构，方便维护和拆分。

内容的提问来源于stack exchange，提问作者Neo710