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

在Vite与Vue3项目中，如果你想要动态获取public目录下指定文件夹的所有文件名，可以通过以下步骤实现：

1. 使用Vite的import.meta.glob功能

Vite提供了import.meta.glob功能，可以用来动态导入文件。你可以利用这个功能来获取public目录下指定文件夹的所有文件名。

2. 实现步骤

2.1 创建获取文件名的函数

你可以在项目中创建一个工具函数来获取指定文件夹下的所有文件名。

// utils/getPublicFiles.js
export async function getPublicFiles(folderPath) {
  const files = import.meta.glob('/public/**/*', { eager: true });

  const fileNames = Object.keys(files)
    .filter((filePath) => filePath.startsWith(`/public/${folderPath}`))
    .map((filePath) => filePath.replace(`/public/${folderPath}/`, ''));

  return fileNames;
}

2.2 在Vue组件中使用

你可以在Vue组件中使用这个函数来获取指定文件夹下的所有文件名。

<template>
  <div>
    <h1>Files in Public Folder</h1>
    <ul>
      <li v-for="fileName in fileNames" :key="fileName">{{ fileName }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getPublicFiles } from './utils/getPublicFiles';

export default {
  setup() {
    const fileNames = ref([]);

    onMounted(async () => {
      fileNames.value = await getPublicFiles('your-folder-name');
    });

    return {
      fileNames,
    };
  },
};
</script>

3. 解释

• import.meta.glob('/public/**/*', { eager: true })：这会匹配public目录下的所有文件，并返回一个对象，键是文件路径，值是文件内容。
• filter((filePath) => filePath.startsWith(/public/${folderPath}))：过滤出指定文件夹下的文件路径。
• map((filePath) => filePath.replace(/public/${folderPath}/, ''))：去掉路径前缀，只保留文件名。

4. 注意事项

• public目录下的文件不会被Vite处理，因此它们不会被包含在构建过程中。如果你需要处理这些文件，建议将它们放在src/assets目录下。
• import.meta.glob是Vite特有的功能，如果你使用的是其他构建工具（如Webpack），则需要使用其他方法来实现类似的功能。

5. 总结

通过使用Vite的import.meta.glob功能，你可以轻松地动态获取public目录下指定文件夹的所有文件名，并在Vue组件中使用这些文件名。这种方法非常适合需要动态加载资源的场景。