Почему не получается получить доступ к переменной окружения?

поднял проект коммандой vue init webpack project-name
разобрался как добавить pug и stylus
хочу настроить переменные окружения: использовал плагин, создал файл .env, добавил переменную API_SECRET_KEY=efb9erfdf6fd9vfd98vd8ssv(значение переменной вымышленно для примера) и отправил .env в .gitignore

подкорректировал /config/index.js
внизу то, что я добавил к шаблонной конфигурации
const path = require('path')
const Dotenv = require('dotenv-webpack')

module.exports = {
...
...
...
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: 'stylus-loader'
          }
        }
      }
    ]
  },
  plugins: [
    new Dotenv({ path: path.join(process.cwd(), '.env') })
  ]
}


в App.vueпытаюсь вывести в консоль переменную process.env.API_SECRET_KEY, но выдаёт undefined

В чём проблема? Всё сделал по инструкции. Как вы достаёте переменные из .env в коде компонента?
  • Вопрос задан
  • 988 просмотров
Решения вопроса 1
uaKorona
@uaKorona
Front-End разработчик
С webpack 2 решил вопрос так:
С помощью DefinePlugin определил переменные в глобальной области видимости:
const GLOBALS = {
  'process.env': {
    'NODE_ENV': JSON.stringify('development')
  },  
  API_SECRET_KEY: JSON.stringify('efb9erfdf6fd9vfd98vd8ssv'),
};

module.exports = {
  plugins: [  
      new webpack.DefinePlugin(GLOBALS)
  ],

 externals: {
    API_SECRET_KEY: 'API_SECRET_KEY'
   },
}

После этого API_SECRET_KEY стала доступна в браузере. Пока не прописал в externals - была ситуация, похожа на вашу
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы