在Vue 3 Vite项目中动态加载public目录下的文件

本文介绍如何在Vue 3项目中，使用Vite构建工具，动态获取public目录下特定文件夹内的所有文件名。这对于需要根据文件夹内容动态加载资源的应用场景非常实用。

假设项目结构如下：

<code>├── favicon.ico
├── folder1
│   └── file1.txt
└── folder2
    └── file2.txt</code>

我们需要在Vue组件中获取folder1或folder2文件夹下的所有文件名。直接访问public目录下的文件在运行时是不可行的，因为Vite构建时会将public目录下的文件复制到输出目录，我们无法直接访问原始public目录。因此，我们需要借助Vite提供的import.meta.glob功能。

立即学习“前端免费学习笔记（深入）”；

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

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组件中使用。