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

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

Режимы работы — важная часть проектов 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 для получения приложения готового к публикации, независимо от окружения куда будет осуществляться публиковаться.

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

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

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

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

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

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

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

FOO=foo
BAR=bar
CONCAT=$FOO$BAR # CONCAT=foobar

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

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

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

VUE_APP_TITLE=My App

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

NODE_ENV=production
VUE_APP_TITLE=My Staging App

• 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 - Интерполяции.

process.env.VUE_APP_VERSION = require('./package.json').version

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

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

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

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