Vue-cli 3 Переменные среды все неопределенные

Question

Я испробовал все решения, но ни одно из них мне не подходит.Я просто хочу сохранить некоторые значения в файле .env в моем приложении Vue, но при попытке войти process.env возвращает пустой объект из компонента.

Мой .env файл

VUE_APP_URL={api url}
VUE_APP_TOKEN={token}

Мой план состоял в том, чтобы установить эти переменные среды в свойства данных, но они всегда возвращают undefined.Если я сделаю console.log(process.env.NODE_ENV) из webpack.config.js, это покажет, что я нахожусь в разработке, но если я попытался сделать то же самое из компонента, такого как

mounted() {
    this.$nextTick(() => {
      console.log(process.env.VUE_APP_URL);
    })
  }

Он просто возвращает undefined.

Answer 1

Я понял это - мне пришлось установить dotenv-webpack и инициализировать его в webpack.config.js, что странно, потому что ни один из документов не указал, что мне нужно это сделать.

Answer 2

Если ваша vue-cli версия выше, чем 3.x , и вы помещаете свои .env файлы в корневой каталог, как сказано в комментариях. Чем вы можете получить доступ к переменным среды из компонентов (например, process.env.VUE_APP_YOUR_VARIABLE). Как сказано в Vue-Cli Docs

Только переменные, которые начинаются с VUE_APP_, будут статически встроены в клиентский пакет с webpack.DefinePlugin. Вы можете получить доступ их в вашем коде приложения: console.log(process.env.VUE_APP_SECRET)