Vue CLI - спецификация среды c URL

Question

Работаем над перемещением проекта на Vue и отделением нашего API от пользовательского интерфейса. Все идет хорошо, но единственная проблема, с которой я сталкиваюсь, - это то, что URL-адреса пользовательского интерфейса не будут соответствовать службе API, поэтому я не могу использовать относительные пути, и я не уверен, как получить веб-пакет для их переключения на абсолютные пути, которые будет соответствовать соответствующему сервису.

В идеале я хотел бы, чтобы переменная webpack.config. js, которая при упаковке js знала, должна заменить что-то вроде "% API_URL%" на какое-то значение. Есть ли способ с помощью веб-пакета или vue CLI для решения этой ситуации?

Answer 1

Согласно Vue Руководству CLI , вы можете определить переменные среды:

Вы можете указать переменные env, поместив следующие файлы в ваш проект root:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Файл env просто содержит пары ключ = значение переменных среды:

FOO=bar
VUE_APP_SECRET=secret

Обратите внимание, что только переменные, начинающиеся с VUE_APP_ будет статически встроен в клиентский пакет с помощью webpack.DefinePlugin.

Затем вы сможете получить доступ к переменным env в коде вашего приложения:

console.log(process.env.VUE_APP_SECRET)