Как использовать переменные окружения во Vue.js

Перевод статьи How to Use Environment Variables in Vue.js.


Большинство приложений получают доступ к данным посредством API. Для доступа к API, как правило, требуется уникальный ключ и URL. Вы не должны выкладывать свои ключи для API в репозиторий, потому что это делает их доступными для всех. Решение заключается в том, чтобы хранить ваши все необходимые значения ключей для API в переменных окружения. Итак, как нам получать доступ к переменным окружения в приложении Vue.js? Позвольте мне показать как это сделать.

Лучший способ начать использовать переменные окружения в проекте, который был создан с использованием Vue CLI. Если вы использовали Vue CLI при создании проекта, то Vue CLI автоматически настроил ваш проект на использование webpack для процесса сборки, что значительно упростит вам использование переменных окружения.

Добавление файлов .env

Ваши переменные окружения будут храниться в файле .env. Этот файл должен быть расположен в корневой директории вашего приложения. Чтобы создать файл .env, используйте эту команду:

touch .env

Файл .env будет содержать ваши переменные окружения. В большинстве приложений там будут храниться переменные, которые специфичны для каждой из сред: dev, QA и prod. Чтобы учесть это, вы можете создавать специфичные для каждой среды файлы. Если вы хотите создать файлы для development и production режима, то они будут иметь следующие имена:

.env.development.local
.env.production.local

Содержимое файла .env будет доступно во всех средах. Файл .env.development.local будет доступен только в режиме development, а файл .env.production.local будет доступен только в режиме production.

Вы можете поместить переменные окружения, которые будут одинаковыми для всех сред в файл .env.

ПРИМЕЧАНИЕ. Вы не должны включать в репозиторий какие-либо файлы .env. Добавьте все ваши файлы .env в ваш файл .gitignore, чтобы они не были отправлены в ваш репозиторий.

Добавление содержимого в файлы среды

Я добавил следующую строку в мой файл .env. Эта переменная будет доступна во всех средах:

VUE_APP_TITLE=Shared Title

В моем файле .env.development.local я добавил следующую строку:

VUE_APP_URL=https://dev.com

В моем файле .env.production.local я добавил следующую строку:

VUE_APP_URL=https://production.com

Доступ к переменным окружения

Переменные окружения могут быть доступны в любом месте вашего приложения Vue через глобальный объект process.env. Здесь я добавил две переменные в объект, которые содержат заголовок и URL, которые были получены из переменных окружения:

data() {
  return {
    url: process.env.VUE_APP_URL,
    title: process.env.VUE_APP_TITLE
  }
}

В моем приложении есть следующая запись, которая обращается к этим переменным:

<div>URL: {{ url }}</div>
<div>TITLE: {{ title }}</div>

Если я запускаю npm run serve для просмотра моего приложения в development режиме, то приложение выводит следующие данные:

development режим

Если я запускаю npm run build, то приложение показывает уже совсем другие данные:

production режим

Послесловие

Подписывайся на нас в социальных сетях:
Vue.js

Nuxt.js

Наши друзья uWebDesign: