Vue3Vite项目：public目录文件，这样读取才高效！

本文详解如何在Vue 3 Vite项目中动态读取public目录下的文件。由于Vite构建过程会将public目录复制到输出目录，直接访问原始目录不可行。文章介绍了利用Vite提供的`import.meta.glob`功能，结合通配符和路径过滤，实现动态获取指定文件夹下所有文件名，并对获取到的文件名进行解析和使用，解决Vue3项目中动态加载资源的难题，提升项目开发效率。 关键词：Vue3, Vite, public目录, 动态加载, import.meta.glob, 资源加载

在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功能。

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Vue3Vite项目：public目录文件，这样读取才高效！》文章吧，也可关注golang学习网公众号了解相关技术文章。