Режимы работы и переменные окружения
Режимы работы
Режимы работы — важная часть проектов 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+). Например:
FOO=foo
BAR=bar
CONCAT=$FOO$BAR # CONCAT=foobar
Загруженные переменные станут доступны всем командам 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 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.
будет перезаписываться другим значением.
Использование переменных окружения в клиентском коде
Можно получить доступ к переменным окружения из кода приложения:
console.log(process.env.VUE_APP_NOT_SECRET_CODE)
На этапе сборки process.
будет заменяться соответствующим значением. Когда в файле указано 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.