在Vue 3 Vite项目中动态加载public目录下的文件
本文介绍如何在Vue 3项目中，使用Vite构建工具，动态获取public目录下特定文件夹内的所有文件名。这对于需要根据文件夹内容动态加载资源的应用场景非常实用。
假设项目结构如下：
├── favicon.ico├── folder1│ └── file1.txt└── folder2 └── file2.txt我们需要在Vue组件中获取folder1或folder2文件夹下的所有文件名。直接访问public目录下的文件在运行时是不可行的，因为Vite构建时会将public目录下的文件复制到输出目录，我们无法直接访问原始public目录。因此，我们需要借助Vite提供的import.meta.glob功能。
立即学习“前端免费学习笔记（深入）”；
灵云AI开放平台
灵云AI开放平台
150 查看详情
import.meta.glob是Vite提供的特殊导入语句，允许导入匹配特定模式的文件。我们可以用通配符匹配public目录下的所有文件。以下代码演示如何获取public目录下所有文件信息，并提取文件名：
const 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目录下特定文件夹中的所有文件名，并在Vue组件中使用。
以上就是Vue 3 Vite项目如何动态读取public目录下的文件？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/758452.html
微信扫一扫 
支付宝扫一扫 
