Переменные окружения и режимы работы
Вы можете указать переменные окружения в специальных файлах в корне вашего проекта:
.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.