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

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

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

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

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

touch .env

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

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

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

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

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

Что бы переменные среды стали доступны в приложении vue, я добавил следующую строку в мой файл .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 для просмотра моего приложения в разработке, оно показывает следующее:

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

Оригинальная статья: Jennifer Bland — How to Use Environment Variables in Vue.js