在Vue 3 Vite项目中动态加载public目录下的文件
本文介绍如何在Vue 3项目中，使用Vite构建工具，动态获取
目录下特定文件夹内的所有文件名。这对于需要根据文件夹内容动态加载资源的应用场景非常实用。
假设项目结构如下：
我们需要在Vue组件中获取
或
文件夹下的所有文件名。直接访问
目录下的文件在运行时是不可行的，因为Vite构建时会将
目录下的文件复制到输出目录，我们无法直接访问原始
目录。因此，我们需要借助Vite提供的
功能。
立即学习
“
前端免费学习笔记（深入）
”；
Vue-router参考手册
Vue-router参考手册下载
下载
是Vite提供的特殊导入语句，允许导入匹配特定模式的文件。我们可以用通配符匹配
目录下的所有文件。以下代码演示如何获取
目录下所有文件信息，并提取文件名：
返回一个对象，包含所有匹配文件路径及其对应的导入函数。
返回所有匹配文件路径的数组。通过解析这些路径，即可得到文件名。需要注意的是，返回的路径是相对于项目根目录的。
如果需要更精细的控制，例如只获取特定文件夹下的文件，需要对
的结果进行过滤和解析。例如，要只获取
下的文件，可以过滤包含
的路径。
通过这种方法，我们可以方便地动态获取
目录下特定文件夹中的所有文件名，并在Vue组件中使用。
public├── favicon.ico
├── folder1
│ └── file1.txt
└── folder2
└── file2.txtfolder1folder2publicpublicpublicimport.meta.globimport.meta.globpublicpublicconst files = import.meta.glob('/public/**/*');
console.log(files, Object.keys(files));import.meta.glob('/public/**/*')Object.keys(files)Object.keys(files)folder1/public/folder1/public