Vue CLI

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

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

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

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

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

vue-cli-service build --mode development

При запуске vue-cli-service загрузит переменные окружения из всех соответствующих файлов. Если в них не указана переменная NODE_ENV, то она установится соответствующим образом. Например, NODE_ENV будет установлена в "production" в режиме production, "test" в режиме test, а по умолчанию "development" в противном случае.

Затем NODE_ENV определяет основной режим работы приложения — разработка, production или тестирование — и, следовательно, какую конфигурацию webpack требуется создавать.

Например, для NODE_ENV=test Vue CLI создаёт конфигурацию webpack, которая оптимизирована и предназначена для модульных тестов. В ней не обрабатываются изображения и другие ресурсы, которые не требуются для модульных тестов.

Аналогично, при NODE_ENV=development создаётся конфигурация webpack, которая включает горячую перезагрузку модулей (HMR), не добавляет хэши в имена файлов ресурсов и не создаёт сборку для вендоров, чтобы обеспечить быструю пересборку при запуске сервера разработки.

При запуске vue-cli-service build, значение всегда должно быть NODE_ENV=production для получения приложения готового к публикации, независимо от окружения куда будет осуществляться публиковаться.

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

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

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

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

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

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

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

ВНИМАНИЕ

Не храните никаких секретов (например, приватных ключей API) в приложении!

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

Обратите внимание, что только NODE_ENV, BASE_URL и переменные, именованные с префикса VUE_APP_, статически внедрятся в клиентскую сборку с помощью webpack.DefinePlugin. Это сделано во избежание случайного обнародования закрытого ключа на машине, которая может иметь такое же имя.

Подробнее о правилах парсинга env можно узнать в документации dotenv. Мы также используем dotenv-expand для переменных расширения (доступно в Vue CLI 3.5+).

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

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

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

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

Файлы .env загружаются при запуске vue-cli-service. При внесении изменений в файлы необходимо перезапустить службу.

Пример: режим 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 будет перезаписываться другим значением.

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

Можно получить доступ к переменным окружения из кода приложения:

console.log(process.env.VUE_APP_NOT_SECRET_CODE)

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

В дополнение к переменным 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

module.exports = {
  // конфигурация
}

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

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

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