Vue CLI

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

Вы можете указать переменные окружения в специальных файлах в корне вашего проекта:

.env                # загружается во всех случаях
.env.local          # загружается во всех случаях, игнорируется git
.env.[mode]         # загружается только в указанном режиме работы
.env.[mode].local   # загружается только в указанном режиме работы, игнорируется git

Такой .env файл просто содержит пары ключ=значение требуемых переменных окружения:

FOO=bar
VUE_APP_SECRET=secret

Эти переменные будут доступны для всех команд vue-cli-service, плагинов и зависимостей.

Приоритет загрузки переменных окружения

Файл с переменными для определённого режима работы (например, .env.production) имеет более высокий приоритет, чем общий файл (например, .env).

Кроме того, переменные окружения, которые уже существуют при загрузке Vue CLI имеют наивысший приоритет и не будут перезаписаны значениями из файлов .env.

Предупреждение об использовании NODE_ENV

Если в вашем окружении по умолчанию установлен NODE_ENV, вы должны либо удалить его, либо явно установить NODE_ENV при выполнении команд vue-cli-service.

Режимы работы

Режимы работы — важная часть проектов Vue CLI. По умолчанию, есть три режима работы:

  • development используется vue-cli-service serve
  • production используется vue-cli-service build и vue-cli-service test:e2e
  • test используется vue-cli-service test:unit

Обратите внимание, что режим работы отличается от NODE_ENV, поскольку режим может устанавливать несколько переменных окружения. Тем не менее, каждый режим устанавливает NODE_ENV в такое же значение по умолчанию — например, NODE_ENV будет установлен в "development" в режиме разработки.

Вы можете установить переменные окружения только для определённого режима работы с помощью постфикса .env файла. Например, если создать файл с именем .env.development в корне вашего проекта, тогда переменные объявленные в нём будут загружаться только в режиме development.

Вы можете переопределить режим по умолчанию для команды, с помощью опции --mode. Например, если необходимо использовать переменные для разработки в команде сборки, добавьте это в свои скрипты package.json:

"dev-build": "vue-cli-service build --mode development",

Пример: режим Staging

Предположим, что у нас есть приложение с .env файлом:

VUE_APP_TITLE=My App

И следующий .env.staging файл:

NODE_ENV=production
VUE_APP_TITLE=My App (staging)

  • vue-cli-service build собирает приложение для production, загружает .env, .env.production и .env.production.local если они присутствуют;

  • vue-cli-service build --mode staging собирает приложение для production в режиме staging, используя .env, .env.staging и .env.staging.local если они присутствуют.

В обоих случаях приложение собирается для production из-за установленного NODE_ENV, но в режиме staging, process.env.VUE_APP_TITLE будет перезаписываться другим значением.

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

Только переменные с префиксом VUE_APP_ статически внедряются в клиентскую сборку используя webpack.DefinePlugin. К ним можно получить доступ из кода вашего приложения:

console.log(process.env.VUE_APP_SECRET)

На этапе сборки process.env.VUE_APP_SECRET будет заменяться соответствующим значением. Когда в файле указано VUE_APP_SECRET=secret — после сборки значением будет "secret".

В дополнение к переменным VUE_APP_* также есть две специальные переменные, которые всегда доступны в коде вашего приложения:

  • NODE_ENV — значение будет "development", "production" или "test" в зависимости от режима работы в котором работает приложение.
  • BASE_URL — соответствует опции publicPath в vue.config.js и определяет базовый путь по которому опубликовано ваше приложение.

Все разрешённые переменные окружения также будут доступны внутри public/index.html как обсуждалось ранее в разделе HTML - Интерполяции.

Совет

Можно добавлять вычисляемые переменные окружения в vue.config.js. Они по-прежнему должны именоваться с префикса VUE_APP_. Это может пригодиться например для получения информации о версии process.env.VUE_APP_VERSION = require('./package.json').version

Переменные только для локального окружения

Иногда необходимы переменные окружения, которые не должны быть привязаны к кодовой базе, особенно если ваш проект размещается в публичном репозитории. В таком случае вы должны использовать файл .env.local. Локальные env-файлы добавлены в .gitignore по умолчанию.

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

← Цели сборки→