Переменные окружения

Переменные окружения позволяют управлять конфигурацией приложения в зависимости от среды выполнения: разработки, тестирования или продакшена. В Quasar они играют ключевую роль для настройки поведения приложения без изменения исходного кода.

Основы использования

Quasar использует файлы .env для хранения переменных окружения. По умолчанию поддерживаются следующие файлы:

  • .env — базовые переменные, применяемые во всех средах.
  • .env.production — переменные, используемые только в режиме продакшн.
  • .env.development — переменные, используемые только в режиме разработки.
  • .env.staging — переменные для промежуточных стадий (если используется).

Формат записи переменных стандартный для Node.js:

VUE_APP_API_URL=https://api.example.com
VUE_APP_FEATURE_FLAG=true

Ключевое правило: все переменные, которые нужно использовать в коде приложения, должны начинаться с префикса VUE_APP_. Quasar автоматически добавляет их в объект process.env на этапе сборки.

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

Переменные окружения доступны в любом месте приложения через process.env:

const apiUrl = process.env.VUE_APP_API_URL;
const featureFlag = process.env.VUE_APP_FEATURE_FLAG === 'true';

Обратите внимание, что все значения из .env по умолчанию имеют тип строки. Для логических и числовых значений требуется явное преобразование:

const maxRetries = parseInt(process.env.VUE_APP_MAX_RETRIES, 10);
const enableLogging = process.env.VUE_APP_ENABLE_LOGGING === 'true';

Интеграция с Quasar CLI

При использовании Quasar CLI переменные окружения автоматически подставляются во время сборки. В quasar.conf.js можно получить доступ к ним через объект process.env или использовать в build.env:

module.exports = function (/* ctx */) {
  return {
    build: {
      env: {
        API_URL: process.env.VUE_APP_API_URL,
        FEATURE_FLAG: process.env.VUE_APP_FEATURE_FLAG
      }
    }
  }
}

Переменные, указанные в build.env, становятся доступными в коде напрямую через process.env.API_URL, что может быть удобнее для сокращения префиксов.

Изменение поведения приложения

Переменные окружения позволяют конфигурировать:

  • URL API и бекенд-сервисов;
  • Включение или отключение функциональных флагов;
  • Настройки логирования и дебага;
  • Конфигурацию сторонних библиотек (например, аналитики, карт или платежных сервисов).

Пример условной загрузки модуля в зависимости от переменной окружения:

if (process.env.VUE_APP_ENABLE_ANALYTICS === 'true') {
  import('analytics-lib').then(analytics => {
    analytics.init();
  });
}

Безопасность и ограничения

Переменные окружения, включенные в сборку фронтенда, не являются секретными. Все значения становятся частью скомпилированного кода и могут быть просмотрены пользователем через инструменты разработчика. Для секретов рекомендуется использовать серверные переменные или специальные сервисы для управления ключами.

Quasar также поддерживает динамическую загрузку конфигураций через файлы JSON или серверные API для более безопасного хранения чувствительных данных.

Работа с разными средами

Для переключения между средами используется флаг --mode при запуске:

quasar dev --mode spa
quasar build --mode spa --target production

Quasar автоматически подставляет соответствующие .env файлы (.env.development при quasar dev и .env.production при quasar build с production). Можно создавать собственные файлы для staging или других нестандартных сред и подключать их через quasar.conf.js.

Динамическая подстановка в шаблонах

В компонентах Vue переменные окружения могут использоваться в шаблонах с помощью вычисляемых свойств или методов:

<template>
  <div>
    <p>Текущий API: {{ apiUrl }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    apiUrl() {
      return process.env.VUE_APP_API_URL;
    }
  }
}
</script>

Это позволяет адаптировать интерфейс и поведение компонентов под разные среды без изменения исходного кода.

Итоговые рекомендации

  • Использовать префикс VUE_APP_ для всех переменных, которые нужны в фронтенде.
  • Разделять переменные по средам через отдельные .env файлы.
  • Преобразовывать типы переменных вручную, если это необходимо.
  • Никогда не хранить секретные ключи в фронтенд .env файлах.
  • Для сложных сценариев динамического конфигурирования использовать серверные API или JSON-конфиги.

Переменные окружения в Quasar обеспечивают гибкую настройку приложений, позволяя поддерживать несколько конфигураций для разработки, тестирования и продакшена без дублирования кода.

Оглавление