В современной веб-разработке крайне важно управлять конфиденциальными данными, такими как ключи API, учетные данные базы данных и различные конфигурации для разных сред. Хранение этих переменных непосредственно в коде может создать угрозу безопасности и усложнить развертывание. Vite, современный инструмент сборки внешнего интерфейса, предоставляет простой способ управления переменными среды через файлы .env.

Что такое файл .env?

Файл .env — это простой файл конфигурации, используемый для определения переменных, специфичных для среды. Доступ к этим переменным можно получить внутри вашего приложения, оставаясь при этом отделенными от исходного кода. Такая практика позволяет легко управлять различными средами — разработкой, промежуточным этапом и производством — без жесткого кодирования конфиденциальных данных.

Переменные среды в Vite:

Vite имеет встроенную поддержку переменных среды, что упрощает ввод различных значений в зависимости от текущей среды. Вот как Vite обрабатывает переменные среды:

Глобальные переменные: Vite внедряет переменные среды во время сборки.
Переменные с префиксом: Только переменные с префиксом VITE_ доступны клиентскому коду JavaScript по соображениям безопасности. Любые переменные, не имеющие такого префикса, будут недоступны в браузере.

Пример переменной среды Vite:

VITE_API_URL=https://api.example.com

Настройка файлов .env в Vite
Vite поддерживает несколько файлов .env, что позволяет вам определять переменные среды для конкретных сред. Вот типичная установка:

.env: файл по умолчанию для переменных среды, общих для всех сред.
.env.development: переменные, специфичные для среды разработки.
.env.production: переменные, относящиеся к производственной среде.

Пример файла .env:

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

Пример файла .env.development:

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

Пример файла .env.production:

VITE_API_URL=https://api.production.com
VITE_DEBUG_MODE=false

Доступ к переменным среды в Vite

Чтобы получить доступ к переменным среды внутри вашего проекта Vite, используйте объект import.meta.env.

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

Vite автоматически заменяет значения import.meta.env во время процесса сборки на основе текущей среды.

Управление несколькими средами:

Файлы .env Vite можно настроить для различных сред, таких как разработка, промежуточное исполнение и производство. В зависимости от того, в какой среде вы находитесь, Vite загрузит соответствующий файл .env:

При запуске vite загружается файл .env.development.
Запуск сборки vite загружает файл .env.production.
Запуск в определенной среде:

vite --mode staging

Переменные среды отладки:

Если у вас возникли проблемы с тем, что переменные среды не работают должным образом, проверьте следующее:

• Префикс переменной: убедитесь, что все переменные на стороне клиента имеют префикс VITE_, поскольку Vite игнорирует переменные без этого префикса.
• Порядок загрузки Env: убедитесь, что файлы .env и файлы, относящиеся к среде, находятся в корне проекта и имеют правильные названия.
• Проверьте процесс сборки: используйте console.log(import.meta.env), чтобы просмотреть все доступные переменные среды во время разработки.

Заключение::

Встроенная поддержка Vite переменных среды через файлы .env упрощает управление конфигурациями в различных средах.