.env VUE_APP_ переменная json?

Question

Начиная использовать vue cli 3 и столкнулся с вариантом использования, для которого я не могу найти ответ.

Как установить переменную окружения через файл .env (т. Е. .Vv.development, .env.production и т. Д.), Который предоставляет объект JSON?Кроме того, есть ли способ загрузить содержимое внешних файлов в переменную среды (т. Е. Требовать)?

Оцените помощь!

Answer 1

Вы можете stringObj = JSON.stringfy (YourJson), затем сохранить эту строку внутри VUE_APP_SOME_KEY_NAME.

, но когда вы будете ее использовать, вам сначала потребуется JSON.parse ().

Таким образом, вы не можете напрямую сохранить объект json в файле значения ключа .dotEnv.

Другой вариант - загрузить эти файлы json на основе process.env.NODE_ENV. like: require (`config.${process.env.NODE_ENV}.js)

Answer 2

Я нашел решение для решения своей собственной проблемы ...

Хотя предыдущие ответы были жизнеспособными, я не хотел использовать JSON.parse каждый раз, когда хотел использовать JSON впеременная окружения.

Подход, который я выбрал, состоял в том, чтобы сохранить в каждом файле, специфичном для среды (то есть .env-development, .env-production, .env-test) путь к файлу, содержащему JSON.Например ...

VUE_APP_JSON_FILE=./.env.development.json-data

Этот файл будет содержать сырой JSON ...

Затем в моем vue.config.js я использовал веб-пакет DefinePlugin, чтобы загрузить файл и сделатьэто доступно через глобальную переменную.Например ...

new webpack.DefinePlugin({
     VUE_APP_JSON: JSON.stringify(process.env.VUE_APP_JSON_FILE)
})

Определение новой переменной сделает json доступным как объект, где в моем приложении я могу просто ссылаться на VUE_APP_JSON.property.Это избавляет меня от необходимости использовать переменную JSON.parse во всем приложении.

Answer 3

Вы должны различать, какой профиль, используя точку . (как .env.production или .env.development), и формат должен быть KEY = значение, вы не можете поместить объект json здесь, только строки, но вы можете использовать JSON.parse в вашем коде для десериализации любой строки в файле.

Vue cli будет разрешать доступ только к переменным окружения, которые начинаются с VUE_APP_, а для доступа к process.env.VUE_APP_SECRET

Вы можете найтиэто и многое другое в документах