在Vite + Vue3项目开发中，经常会遇到需要获取public文件夹下子文件夹文件列表的需求。这在一些场景下，比如动态展示图片库、加载特定资源等方面十分有用。下面就为大家详细介绍实现这一功能的方法。

要明确public文件夹的作用。在Vite构建的Vue3项目里，public文件夹用于存放那些无需经过打包处理的静态资源。这些资源会被直接复制到最终的输出目录中。

要获取public文件夹下子文件夹的文件列表，不能像在服务器端那样直接使用文件系统相关的操作，因为前端运行环境没有直接访问本地文件系统的权限。一种常用的解决思路是利用HTML的<input>标签的type="file"属性来模拟文件选择操作，然后通过JavaScript来处理选中的文件列表。

在Vue组件中，可以这样实现：

<template>
  <input type="file" ref="fileInputRef" multiple @change="handleFileChange" />
</template>

<script setup>
import { ref } from 'vue';

const fileInputRef = ref(null);
const fileList = ref([]);

const handleFileChange = () => {
  const files = fileInputRef.value.files;
  if (files) {
    fileList.value = Array.from(files);
  }
};
</script>

上述代码中，通过<input>标签的change事件，获取到用户选择的文件列表，并存储在fileList中。但这种方式是用户手动选择文件，并非直接获取public文件夹下子文件夹的文件列表。

如果想要在页面加载时就获取到文件列表，可以通过在public文件夹下创建一个JSON文件来记录子文件夹下的文件信息。例如，在public文件夹下创建一个fileList.json，在其中按照如下格式写入文件信息：

{
  "subFolderName": ["file1.jpg", "file2.jpg"]
}

然后在Vue组件中通过fetch方法来读取这个JSON文件：

<template>
  <div>
    <ul>
      <li v-for="(files, folder) in fileData" :key="folder">
        {{ folder }}:
        <ul>
          <li v-for="file in files" :key="file">{{ file }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const fileData = ref({});

fetch('/fileList.json')
.then(response => response.json())
.then(data => {
    fileData.value = data;
  });
</script>

通过这种方式，就能巧妙地实现获取public文件夹下子文件夹文件列表的功能，满足项目中的特定需求。这种方法既简单又高效，有助于提升项目开发的效率和用户体验。