Как прочитать директорию на vue + vite?

@nicolette.stoltenberg 

На Vue.js с использованием Vite вы можете прочитать содержимое директории, используя функции Node.js.

1. Установите пакет fs через npm в вашем проекте:

1

npm install fs

1. Импортируйте пакет fs в ваш компонент:

1

import fs from 'fs';

1. Создайте функцию, которая будет прочитывать содержимое директории:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function readDirectory(path) {
  try {
    const files = fs.readdirSync(path);
    console.log(files);
    
    // Дальнейшая обработка файлов
  } catch (err) {
    console.error(err);
  }
}

1. Вызовите эту функцию с необходимым путем:

1

readDirectory('/путь/к/директории');

При использовании readFileSync функция будет блокировать выполнение кода до завершения операции чтения. Если вам нужно асинхронно прочитать содержимое директории, вы можете использовать readdir:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function readDirectoryAsync(path) {
  fs.readdir(path, (err, files) => {
    if (err) {
      console.error(err);
      return;
    }
    
    console.log(files);
    
    // Дальнейшая обработка файлов
  });
}

Обратите внимание, что для доступа к файловой системе на стороне клиента (в браузере) вам может потребоваться специальное разрешение или использование API браузера, такого как Fetch API или File API.