Vite项目里获取public文件夹下所有文件名的方法

在Vite项目开发中，有时我们需要获取public文件夹下的所有文件名，以便进行一些特定的操作，比如资源管理、文件遍历等。下面将介绍几种常见的方法来实现这一需求。

方法一：使用Node.js的fs模块

Vite是基于Node.js环境的，因此可以利用Node.js的内置模块fs来实现文件读取。在项目的合适位置（如某个工具函数文件中），引入fs模块。示例代码如下：

const fs = require('fs');
const path = require('path');

const publicDir = path.join(__dirname, '../public');

function getPublicFileNames() {
  const fileNames = [];
  fs.readdirSync(publicDir).forEach(file => {
    fileNames.push(file);
  });
  return fileNames;
}

const allFileNames = getPublicFileNames();
console.log(allFileNames);

上述代码通过readdirSync方法同步读取public文件夹下的所有文件名，并将其存储在数组中返回。

方法二：结合Vite的插件机制

Vite提供了强大的插件系统，我们可以编写自定义插件来获取public文件夹下的文件名。创建一个插件文件，在插件的configResolved钩子函数中获取public文件夹路径，然后在generateBundle钩子函数中读取文件名。示例代码如下：

const fs = require('fs');
const path = require('path');

function publicFilesPlugin() {
  let publicDir;

  return {
    name: 'public-files-plugin',
    configResolved(config) {
      publicDir = config.publicDir;
    },
    generateBundle() {
      const fileNames = fs.readdirSync(publicDir);
      console.log(fileNames);
    }
  };
}

module.exports = publicFilesPlugin;

在vite.config.js中引入并使用该插件。

注意事项

在使用fs模块读取文件时，要注意路径的正确性，避免出现路径错误导致无法读取文件的情况。在使用插件时，要确保插件的逻辑正确且符合Vite的插件规范。

通过以上方法，我们可以在Vite项目中方便地获取public文件夹下的所有文件名，从而满足项目开发中的各种需求。