Vue3项目中如何动态读取public目录下指定文件夹的所有文件名？

Vue3项目：动态获取public目录下文件夹的文件名

在Vue3项目中，访问和操作public目录下的静态资源是常见需求。本文将讲解如何动态获取public目录下特定文件夹的所有文件名，并在Vite构建环境中实现此功能。

问题： 假设public目录下有多个子文件夹（例如：folder1、folder2），每个文件夹包含多个文件。我们需要在Vue组件中，根据文件夹名称动态获取对应文件夹下的所有文件名。

解决方案： 利用Vite提供的import.meta.glob API，可以高效地导入匹配特定模式的文件。

示例目录结构：

├── favicon.ico
├── folder1
│   └── file1.txt
│   └── file2.jpg
└── folder2
    └── file3.pdf
    └── file4.txt

代码实现：

在你的Vue组件中，可以使用以下代码获取public目录下特定文件夹的文件名：

// 获取public/folder1下的所有文件
const files = import.meta.glob('/public/folder1/*');
const fileNames = Object.keys(files).map(path => path.replace('/public/folder1/', '').replace(//$/, '')); // 去除路径前缀和结尾斜杠

console.log(fileNames); // 输出：['file1.txt', 'file2.jpg']


// 获取public目录下所有文件（更通用的方法）
const allFiles = import.meta.glob('/public/**/*');
//  需要根据实际需求进一步处理allFiles，例如分组到不同的文件夹中

import.meta.glob('/public/folder1/*') 匹配public/folder1目录下的所有文件。Object.keys(files) 获取文件路径数组。replace方法用于去除路径前缀和结尾斜杠，提取纯文件名。 如果需要获取所有文件夹下的文件，可以使用import.meta.glob('/public/**/*')，但需要后续处理以区分不同文件夹。

通过以上方法，你可以轻松地在Vue3项目中动态获取public目录下指定文件夹的所有文件名，并将其用于页面展示或其他操作。 记住，返回的路径是相对于项目根目录的。