Environment переменные

В Vue.js переменные окружения (environment variables) используются для управления конфигурацией приложения в разных средах: разработка, тестирование, продакшн. Они позволяют централизованно хранить значения, такие как URL API, ключи авторизации или настройки флагов, без необходимости жестко прописывать их в коде.

Создание и использование переменных окружения

Файлы переменных окружения должны находиться в корне проекта Vue и иметь формат .env. Vue поддерживает несколько типов файлов:

  • .env — общие переменные для всех сред.
  • .env.development — переменные для режима разработки.
  • .env.production — переменные для продакшн-сборки.
  • .env.test — переменные для тестовой среды.

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

VUE_APP_API_URL=http://localhost:3000
VUE_APP_FEATURE_FLAG=true

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

Доступ к переменным из кода

В коде Vue.js переменные окружения доступны через объект process.env. Например:

export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_API_URL,
      featureFlag: process.env.VUE_APP_FEATURE_FLAG === 'true'
    };
  },
  created() {
    console.log('API URL:', this.apiUrl);
    console.log('Feature flag enabled:', this.featureFlag);
  }
}

Особенности:

  • Значения переменных всегда строковые. Для булевых или числовых значений требуется явное преобразование (Boolean(), Number(), сравнение с 'true').
  • Изменение файлов .env требует пересборки проекта, чтобы новые значения вступили в силу.

Переменные окружения в конфигурации сборки

Vue CLI использует переменные окружения для настройки Webpack и других инструментов сборки. Например, можно настроить разные API-бэкенды для разработки и продакшна:

// vue.config.js
module.exports = {
  devServer: {
    proxy: process.env.VUE_APP_API_URL
  }
}

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

Безопасность и приватные переменные

Переменные, определенные с префиксом VUE_APP_, становятся доступными в клиентском коде и видны в браузере. Секретные ключи и пароли хранить таким образом нельзя. Для этого используют серверную часть или файлы .env без префикса VUE_APP_, которые будут доступны только на сервере.

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

Vue CLI автоматически определяет режим сборки через переменную NODE_ENV:

  • development — запуск npm run serve.
  • production — сборка npm run build.
  • test — выполнение тестов npm run test:unit.

Можно задать пользовательские режимы, создав файл .env.<mode> и передавая режим через CLI:

vue-cli-service build --mode staging

Переменные из .env.staging будут использованы в сборке вместо .env по умолчанию.

Динамическое использование переменных

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

const apiUrl = process.env.VUE_APP_API_URL;

axios.defaults.baseURL = apiUrl;

Это позволяет не менять код при переходе между средами, а лишь менять соответствующий файл .env.

Рекомендации по организации

  1. Все клиентские переменные должны начинаться с VUE_APP_.
  2. Хранить секретные ключи отдельно на сервере.
  3. Разделять .env файлы по средам для удобства поддержки.
  4. Явно приводить строки к нужным типам.
  5. Не коммитить .env.local с локальными секретами в репозиторий.

Интеграция с Vuex и компонентами

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

export const state = () => ({
  apiUrl: process.env.VUE_APP_API_URL
});

export const getters = {
  apiUrl: state => state.apiUrl
};

Компоненты получают данные через геттеры или через инъекцию конфигурации, что обеспечивает централизованное управление настройками.

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

При использовании TypeScript полезно расширить типы для process.env:

interface ImportMetaEnv {
  readonly VUE_APP_API_URL: string;
  readonly VUE_APP_FEATURE_FLAG: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

Это позволяет использовать автодополнение и проверку типов при доступе к переменным окружения в коде TypeScript.

Оглавление