Vue.js中如何读取public/images文件夹并获取所有文件名？

首先明确几个核心限制：浏览器环境受安全策略约束，无法直接读取服务器端的文件夹内容；fs是Node.js专属API，不能在Vue组件的浏览器运行代码中使用；FileReader仅用于读取用户主动上传的文件，无法自动遍历项目静态文件夹。

下面根据你的文件存放位置，给出两种可行方案：

方案一：图片存放在src/assets/images（推荐，webpack可直接处理） #

利用webpack提供的require.contextAPI，在构建阶段批量获取文件名，无需额外配置：

// 在Vue组件的setup或created钩子中使用
const imageContext = require.context('@/assets/images', false, /\.(png|jpe?g|gif|svg)$/)
// 提取文件名（去掉开头的'./'）
const imageNames = imageContext.keys().map(path => path.replace('./', ''))

console.log(imageNames) // 输出所有符合匹配规则的图片文件名

• 说明：require.context的三个参数分别是资源目录、是否递归子目录、文件名匹配正则，可根据你的需求调整正则规则。

方案二：图片必须存放在public/images（静态资源，webpack不解析） #

由于webpack不会处理public目录下的文件，需要在构建前通过Node.js脚本生成文件名列表，再在Vue中导入使用：

步骤1：创建生成文件名列表的脚本 #

在项目根目录新建generate-image-list.js：

const fs = require('fs')
const path = require('path')

// 定位到public/images目录
const imageDir = path.resolve(__dirname, 'public/images')
// 读取目录下所有文件
const allFiles = fs.readdirSync(imageDir)
// 过滤出图片文件（可根据需要调整后缀）
const imageFiles = allFiles.filter(file => /\.(png|jpe?g|gif|svg)$/.test(file))
// 将文件名列表写入src目录下的JSON文件
fs.writeFileSync(path.resolve(__dirname, 'src/assets/image-list.json'), JSON.stringify(imageFiles))

步骤2：配置构建脚本 #

修改package.json的scripts，让脚本在构建前自动执行：

"scripts": {
  "prebuild": "node generate-image-list.js",
  "build": "vue-cli-service build",
  "serve": "vue-cli-service serve"
}

（prebuild是npm的钩子命令，会在build命令执行前自动运行）

步骤3：在Vue组件中使用文件名列表 #

import imageList from '@/assets/image-list.json'

export default {
  data() {
    return {
      imageNames: imageList
    }
  }
}

为什么其他方案不可行？ #

• 直接用fs模块：fs是Node.js的后端API，浏览器环境没有这个模块，在Vue组件中调用会直接报错。
• FileReader：仅能读取用户通过<input type="file">选择的本地文件，无法主动遍历服务器端的静态资源目录。

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