Vue.js+Webpack：如何获取SPA目录文件列表并存入Vuex？

首先得明确核心问题：浏览器环境没有直接访问文件系统的权限，所以你直接在客户端代码里尝试读取assets/illustrations目录的操作肯定会报错；就算是在服务端执行，如果是纯SPA（非SSR），main.js最终还是会打包到浏览器运行，Node.js的fs模块在浏览器里根本不存在，自然也会报错。

下面给你几个可行的解决方案，按实用性排序：

方案一：构建时用Webpack的require.context生成文件列表（最推荐） #

Vue项目默认用Webpack打包，Webpack提供了require.contextAPI，可以在构建阶段扫描指定目录的文件，生成对应的资源列表，完美适配SPA场景。

步骤示例： #

1. 先创建一个工具函数文件，比如src/utils/getIllustrations.js：

export default function getIllustrations() {
  // 参数说明：
  // 1. 目标目录的相对路径（@代表src目录）
  // 2. true表示递归扫描子目录，false只扫当前目录
  // 3. 正则匹配你需要的文件类型（比如图片）
  const illustrationCtx = require.context('@/assets/illustrations', true, /\.(png|jpe?g|svg|gif)$/)
  
  // 把扫描到的文件转成你需要的JSON结构
  return illustrationCtx.keys().map(filePath => {
    // 提取文件名（比如从./avatar.png里拿到avatar）
    const fileName = filePath.match(/\/([^/]+)\./)[1]
    // 获取打包后的资源URL（Webpack会自动处理哈希重命名的问题）
    const resourceUrl = illustrationCtx(filePath)
    
    return {
      id: fileName,
      url: resourceUrl,
      fullPath: filePath.replace('./', '')
    }
  })
}

2. 在Vuex中引入这个函数，把列表存入仓库：

// src/store/modules/illustrations.js
import getIllustrations from '@/utils/getIllustrations'

const state = {
  list: []
}

const mutations = {
  SET_ILLUSTRATIONS(state, list) {
    state.list = list
  }
}

const actions = {
  fetchIllustrations({ commit }) {
    const illustrationList = getIllustrations()
    commit('SET_ILLUSTRATIONS', illustrationList)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

3. 在App.vue的created钩子中触发这个action：

export default {
  created() {
    this.$store.dispatch('illustrations/fetchIllustrations')
  }
}

方案二：SSR场景下用Node.js的fs模块读取（仅适用于Vue SSR/Nuxt.js） #

如果你用的是服务端渲染（比如Nuxt.js），可以在服务端生命周期里用Node.js的fs模块读取目录，但要注意几个关键点：

• 必须用绝对路径读取目录，不能用相对路径
• 要区分服务端和客户端环境，避免客户端执行fs代码报错

示例代码： #

// 在Nuxt.js的plugins或serverMiddleware里
const fs = require('fs').promises
const path = require('path')

export default async function ({ store }) {
  // 仅在服务端执行
  if (process.server) {
    // 生成服务器上的绝对路径
    const dirPath = path.resolve(__dirname, '../assets/illustrations')
    const files = await fs.readdir(dirPath)
    
    // 过滤出需要的文件类型，生成资源列表
    const illustrationList = files
      .filter(file => /\.(png|jpe?g|svg|gif)$/.test(file))
      .map(file => ({
        name: file.split('.')[0],
        url: `/assets/illustrations/${file}`
      }))
    
    // 存入Vuex
    store.commit('illustrations/SET_ILLUSTRATIONS', illustrationList)
  }
}

你之前出错的原因总结 #

1. 客户端直接读取目录：浏览器没有文件系统访问权限，任何尝试用fs或类似API读取目录的操作都会失败；而且静态资源打包后路径会被Webpack处理（比如加上哈希），直接写原始路径也拿不到正确的资源。
2. 服务端执行的误区：如果是纯SPA项目，main.js最终会打包到浏览器运行，fs模块在浏览器环境中不存在，自然报错；如果是SSR项目，大概率是路径处理错误，用了相对路径而不是绝对路径。

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