读取文件夹下所有文件名 vue3

要读取文件夹下所有文件名，我们可以使用Node.js中的fs模块。具体来说，我们可以使用fs.readdirSync方法读取文件夹中的所有文件名。

首先，需要安装Node.js和Vue CLI 3。在安装Vue CLI 3后，我们可以使用命令行工具进入我们的应用程序的根目录，在其中新建一个名为util.js的文件。该文件将包含我们用于读取文件夹下所有文件名的函数。

接下来，我们可以使用下面的代码来实现读取文件夹下所有文件名的功能：

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

function getFiles(dir) {
  const files = fs.readdirSync(dir);
  let fileList = [];

  files.forEach((file) => {
    const filepath = path.join(dir, file);

    if (fs.statSync(filepath).isDirectory()) {
      fileList = fileList.concat(getFiles(filepath));
    } else {
      fileList.push(filepath);
    }
  });

  return fileList;
}

module.exports = {
  getFiles,
};

上述代码中，我们定义了一个名为getFiles的函数，该函数接受一个参数dir，我们需要读取的文件夹的路径。该函数首先使用fs.readdirSync方法获取指定文件夹中的所有文件和文件夹的名称，并将它们存储在一个名为files的数组中。

然后，我们使用forEach方法迭代files数组中的每个文件和文件夹，并使用fs.statSync方法获取每个文件和文件夹的信息。如果当前项目是一个文件夹，则我们将递归调用getFiles函数，并将它返回的结果与当前数组合并。

如果项目是一个文件，则我们将添加该文件的完整路径到数组fileList中。最后，我们将数组fileList返回给调用函数的代码。

我们可以在Vue的组件中使用getFiles函数，以便动态加载文件夹中的文件。例如，我们可以在组件的script标记中使用以下代码：

import { getFiles } from './util';

export default {
  name: 'MyComponent',
  data() {
    return {
      files: [],
    };
  },
  created() {
    this.files = getFiles('./directory/to/read');
  },
};

上述代码示例中，我们从已导出的getFiles函数中导入它，并在组件的created生命周期钩子中使用该函数获取指定文件夹中的所有文件名。

总而言之，使用Node.js中的fs模块以及一些递归代码，我们可以方便地读取指定文件夹中的所有文件名，并在Vue组件中使用这些文件名，以便动态地加载它们。