Почему не получается получить переменную окружения process.env.NODE_ENV?

Question

[Mike]

В своём webpack.config.js есть это:

if (process.env.NODE_ENV === 'development') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
        ENDPOINT: '"http://localhost:8000"',
        FOO: "'hello world'"
      }
    })
  ])
}

В vue template:

created() {
        this.$store.dispatch('GET_LEVELS')
        this.$store.dispatch('GET_USERLEVELS')
        console.log(process.env.NODE_ENV, ' <------------NODE_ENV', process.env)
    },

Я получаю undefined. Как исправить это?

Comments

[Dima Polos]

Импорт/реквайр конфига сделали? В куда распаковали?

[Mike]

Dima Polos, ничего не импортировал. Мне по сути нужно использовать эти переменные в main.js. Менять ip адреса. Если npm run build то использовать ip_my_of_server. Если в разработке, то использовать http://localhost:8000.

[Dima Polos]

Mike, у Вас бандл где будет работать? На бэке или как? Если собрать и отдать на фронт там не будет этого process.env...

[Mike]

Dima Polos, да, на беке. На беке будет только dist.
Сейчас на localhoste в разработке получаю undefined.

[Dima Polos]

Mike, попробуйте в конфиге вебпака сделать переменную куда передадите process.env и потом экспортируйте эту переменную, а в vue сделайте импорт/рекваир

[Vitaliy]

Вот так работает ?

'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)

[Mike]

Виталий Столяров, нет, не работает. Спасибо.

[Dima Polos]

Попробуйте просто в ноде запросить process, так вот там есть ключ env, но NODE_ENV там нет, видимо вебпак добавляет этот ключ при старте, поэтому если бандл запустить уже вне сборки, а просто в ноде, то NODE_ENV -> undefined

[Mike]

Dima Polos, спасибо, всё работает. Переменные выводятся из 'production' and 'development' в зависимости от окружения.

[Dima Polos]

Mike, что именно помогло? Я напишу в ответ, может еще кому пригодится

[Mike]

Dima Polos, ну вообщем то что у меня в webpack.config.js, оно работает. Просто мне нужно было перезапустить проект. Вот это для меня работает:

if (process.env.NODE_ENV === 'development') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
        ENDPOINT: '"http://localhost:8000"'
      }
    })
  ])
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"',
        ENDPOINT: '"http://my_server_ip/"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

И в main.js я для baseURL установил axios.defaults.baseURL = process.env.ENDPOINT