Vue3项目：动态获取public目录下文件夹的文件名
在Vue3项目中，访问和操作public目录下的静态资源是常见需求。本文将讲解如何动态获取public目录下特定文件夹的所有文件名，并在Vite构建环境中实现此功能。
问题： 假设public目录下有多个子文件夹（例如：folder1、folder2），每个文件夹包含多个文件。我们需要在Vue组件中，根据文件夹名称动态获取对应文件夹下的所有文件名。
解决方案： 利用Vite提供的import.meta.glob API，可以高效地导入匹配特定模式的文件。
立即学习“前端免费学习笔记（深入）”；
示例目录结构：
<code>├── favicon.ico
├── folder1
│ └── file1.txt
│ └── file2.jpg
└── folder2
└── file3.pdf
└── file4.txt</code>
代码实现：
在你的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目录下指定文件夹的所有文件名，并将其用于页面展示或其他操作。 记住，返回的路径是相对于项目根目录的。
