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

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《Vue3项目中如何动态读取public目录下指定文件夹的所有文件名？》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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目录下指定文件夹的所有文件名，并将其用于页面展示或其他操作。 记住，返回的路径是相对于项目根目录的。

终于介绍完啦！小伙伴们，这篇关于《Vue3项目中如何动态读取public目录下指定文件夹的所有文件名？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！