Как использовать process.env в файлах приложения Vue.js?

209

13 марта 2018, 04:35

Объясните мне, пожалуйста, как я могу задействовать, например, process.env.NODE_ENV непосредственно в коде Vue.js приложения.

Я уточню что имею ввиду не конфиги Webpack'а, а непосредственно файл main.js из:

module.exports = {
  entry: {
    app: './src/main.js'
  },

Читал https://webpack.js.org/plugins/define-plugin/, но ничего не понял. Очень скудные примеры, которые дальше конфигов Webpack не уходят (хотя у них есть пример SERVICE_URL, что очень странно выглядит). На одном форуме видел фразу, мол, с помощью DefinePlugin можно использовать переменные окружения прямо в коде файлов приложения, но опять же никаких примеров, а у меня ничего не получилось. Переменная process или NODE_ENV в коде приложения недоступна - отображает критическую ошибку: 'process' is not defined.

С помощью process.env я хочу передавать, например, в файл main.js данные для Vue.config. Или тот же SERVICE_URL.

Подскажите, пожалуйста, что я делаю не так?

Answer 1

DefinePlugin тут может помочь, в конфиге вебпака:

 plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'SERVICE_URL': JSON.stringify('http://some_url'),
            }
        })
 ]

И далее используем в коде: process.env.SERVICE_URL