Использование переменных среды с Vue.js

Ответ 1

Если вы используете vue cli с шаблоном Webpack (конфигурация по умолчанию), вы можете создавать и добавлять переменные среды в файл .env.

Переменные будут автоматически доступны в process.env.variableName в вашем проекте. Загруженные переменные также доступны для всех команд, плагинов и зависимостей vue-cli-service.

У вас есть несколько вариантов, это из документации переменных и режимов среды:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Ваш файл .env должен выглядеть так:

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

Насколько я понимаю, все, что вам нужно сделать, это создать файл .env и добавить свои переменные, тогда вы готовы к работе! :)

Как отмечено в комментарии ниже: Если вы используете Vue cli 3, будут загружены только переменные, которые начинаются с VUE_APP_.

Не забудьте перезапустить подачу, если она в данный момент запущена.

Ответ 2

Если вы используете Vue cli 3, будут загружены только переменные, которые начинаются с VUE_APP_.

В корне создайте файл .env с:

VUE_APP_ENV_VARIABLE=value

Благодаря этому вы сможете использовать process.env.VUE_APP_ENV_VARIABLE в своем проекте (файлы .js и .vue).

Обновить

Согласно @ali6p, в Vue Cli 3 нет необходимости устанавливать зависимость от dotenv.

Ответ 3

В корне вашего проекта создайте файлы среды:

• .env
• .env.someEnvironment1
• .env.SomeEnvironment2

Чтобы затем загрузить эти конфиги, вы должны указать среду через mode т.е.

npm run serve --mode development //default mode
npm run serve --mode someEnvironment1

В ваших файлах env вы просто объявляете конфигурацию как пары ключ-значение, но если вы используете vue 3, вы должны использовать префикс VUE_APP_:

В вашем .env:

VUE_APP_TITLE=This will get overwritten if more specific available

.env.someEnvironment1:

VUE_APP_TITLE=My App (someEnvironment1)

Затем вы можете использовать это в любом из ваших компонентов через:

myComponent.vue:

<template>
  <div> 
    {{title}}
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      title: process.env.VUE_APP_TITLE
    };
  }
};
</script>

Теперь, если вы запустили приложение без mode оно покажет "This get get...", но если вы укажете someEnvironment1 качестве mode вы получите название оттуда.

Вы можете создавать конфиги, которые "скрыты" от git, добавив .local к вашему файлу: .env.someEnvironment1.local - очень полезно, когда у вас есть секреты.

Прочитайте документы для получения дополнительной информации.

Ответ 4

Проблема, с которой я столкнулся, заключалась в том, что я использовал простую установку webpack для VueJS, которая, похоже, не содержала папку конфигурации переменных среды. Поэтому я не смог редактировать файлы конфигурации env.test, development и production.js. Создание их тоже не помогло.

Другие ответы были недостаточно подробными для меня, поэтому я просто "пошатнулся" с помощью webpack.config.js. И следующее работало отлично.

Чтобы заставить переменные среды работать, webpack.config.js должен иметь следующее внизу:

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

Исходя из вышесказанного, в процессе производства вы сможете получить переменную NODE_ENV

mounted() {
  console.log(process.env.NODE_ENV)
}

Теперь могут быть более эффективные способы сделать это, но если вы хотите использовать переменные среды в разработке, вы сделали бы что-то вроде следующего:

if (process.env.NODE_ENV === 'development') {

  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    })
  ]);

} 

Теперь, если вы хотите добавить другие переменные, было бы просто:

if (process.env.NODE_ENV === 'development') {

  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
        ENDPOINT: '"http://localhost:3000"',
        FOO: "'BAR'"
      }
    })
  ]);
}

Я также должен отметить, что по какой-то причине вам, похоже, нужны двойные кавычки.

Итак, в разделе "Разработка" я могу теперь получить доступ к этим переменным среды:

mounted() {
  console.log(process.env.ENDPOINT)
  console.log(process.env.FOO)
}

Вот весь webpack.config.js только для некоторого контекста:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

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

if (process.env.NODE_ENV === 'development') {

  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
        ENDPOINT: '"http://localhost:3000"',
        FOO: "'BAR'"
      }
    })
  ]);

}

Ответ 5

1. Создайте два файла в корневой папке (рядом с package.json) .env и .env.production
2. Добавьте переменные в эти файлы с префиксом VUE_APP_ например: VUE_APP_WHATEVERYOUWANT
3. serve использует .env и build использует .env.production
4. В ваших компонентах (vue или js) используйте process.env.VUE_APP_WHATEVERYOUWANT для вызова значения
5. Не забудьте перезапустить подачу, если она в данный момент работает
6. Очистить кеш браузера

Убедитесь, что вы используете vue-cli версии 3 или выше

Для получения дополнительной информации: https://cli.vuejs.org/guide/mode-and-env.html

Ответ 6

В vue-cli версии 3:

Есть варианты для.env файлов: либо вы можете использовать .env или:

• .env.test
• .env.development
• .env.production

Вы можете использовать пользовательские переменные .env, используя префикс regex как /^/ вместо /^VUE_APP_/ in /node_modules/@vue/cli-service/lib/util/resolveClientEnv.js:prefixRE

Это, конечно же, не рекомендуется для разработки приложения с открытым исходным кодом в различных режимах, таких как тестирование, разработка и производство файлов .env. Поскольку каждый раз, когда вы npm install.., он будет отменен.

Ответ 7

Для тех, кто использует Vue CLI 3 и простую установку через веб-пакет, ответ Аарона мне webpack.config.js однако я не был заинтересован в добавлении переменных окружения в мой webpack.config.js поскольку я хотел зафиксировать его в GitHub. Вместо этого я установил плагин dotenv-webpack, и он, похоже, прекрасно загружает переменные среды из файла .env в корне проекта без необходимости добавлять VUE_APP_ к переменным среды.

Ответ 8

В дополнение к предыдущим ответам, если вы хотите получить доступ к переменным VUE_APP_ * env в вашем sass (либо в разделе sass компонента vue, либо в файле scss), то вы можете добавить следующее в свой vue.config.js( который вам может понадобиться создать, если у вас его нет):

let sav = "";
for (let e in process.env) {
    if (/VUE_APP_/i.test(e)) {
        sav += '$${e}: "${process.env[e]}";';
    }
}

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: sav,
            },
        },
    },
}

Кажется, что строка sav добавляется перед каждым файлом sass перед обработкой, что хорошо для переменных. Вы также можете импортировать миксины на этом этапе, чтобы сделать их доступными для секции sass каждого компонента vue.

Затем вы можете использовать эти переменные в разделе sass файла vue:

<style lang="scss">
.MyDiv {
    margin: 1em 0 0 0;
    background-image: url($VUE_APP_CDN+"/MyImg.png");
}
</style>

или в файле .scss:

.MyDiv {
    margin: 1em 0 0 0;
    background-image: url($VUE_APP_CDN+"/MyImg.png");
}

с https://www.matt-helps.com/post/expose-env-variables-vue-cli-sass/