Каталог переменных в Vite

Каталог переменных переносит файлы .env из корня в отдельную папку.

По умолчанию Vite ищет .env и файлы режима в корне проекта. Поле envDir в vite.config.js задаёт другую папку, откуда брать те же имена. Путь пишут строкой относительно корня, например config/env.

Создадим каталог и положим туда файл режима staging:

VITE_TITLE=hello

Укажем каталог в настройке:

import { defineConfig } from 'vite'

export default defineConfig({
  envDir: 'config/env',
})

В точке входа снова выведем VITE_TITLE:

document.body.textContent = import.meta.env.VITE_TITLE;

Запустим сервер с режимом staging:

npx vite --mode staging

Откроем страницу: на экране будет hello из config/env/.env.staging, хотя в корне такого файла уже нет. После смены envDir перезапустим сервер, чтобы он перечитал настройку.

Перенесите .env.preview в config/env с переменной VITE_LABEL и значением ready, настройте каталог переменных и выведите строку на страницу в режиме preview.

Удалите или переименуйте файл в корне с тем же именем и убедитесь, что на странице по-прежнему показывается ready, а не старое значение из корня.