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

На чтение1 мин

Обновлено11 месяцев назад

Просмотров

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

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

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

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

touch .env

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

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

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

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

ПРИМЕЧАНИЕ. Не следует включать файлы .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 
    }
}

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

URL: {{ url }} 
TITLE: {{ title }}

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

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

#Vue