Поиск по сайту:

Как использовать переменные среды в Vue.js

Введение

В веб-приложении вам, скорее всего, придется обращаться к внутреннему серверу API через URL-адрес. В среде разработки — когда вы работаете локально, этот URL-адрес может выглядеть примерно так: http://localhost:8080/api. В производственной среде — когда проект развернут, этот URL-адрес может выглядеть примерно так: https://example.com/api. Переменные среды позволяют автоматически изменять этот URL-адрес в соответствии с текущим состоянием проекта.

С Vue.js можно использовать переменные среды через файлы с расширением .env. Эти файлы отвечают за хранение информации, относящейся к среде («разработка», «тестирование», «производство» и т. д.).

В этой статье вы узнаете, как работать с различными конфигурациями между режимами разработки и производства для проектов Vue.js с использованием Vue CLI 3+ и 2.

Предпосылки

Чтобы следовать этой статье, вам понадобятся:

  • Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
  • Некоторое знакомство с настройкой проекта Vue.js.

Это руководство было проверено с помощью Node v15.1.0, npm v6.14.8, Vue.js v2.6.12, TypeScript v3.9.3, @vue/cli v4.5.8 и vue-cli v2.9.6.

Шаг 1 — Использование файлов .env с Vue CLI 3+

Vue CLI 4 — это текущая версия @vue/cli. Создав проект Vue.js, вы можете добавить файлы .env и .env.production.

В своем терминале создайте новый проект Vue.js с @vue/cli:

  1. npx @vue/cli create vue-cli-env-example

Перейдите в каталог проекта;

  1. cd vue-cli-env-example

В редакторе кода создайте файл .env и добавьте следующие значения:

VUE_APP_ROOT_API=http://localhost/api

Затем с помощью редактора кода создайте файл .env.production и добавьте следующие значения:

VUE_APP_ROOT_API=http://www.example.com/api

Примечание. Здесь важен префикс VUE_APP_, и переменные без этого префикса не будут доступны в вашем приложении.

После создания переменной VUE_APP_ROOT_API вы можете использовать ее где угодно в Vue через глобальный объект process.env:

process.env.VUE_APP_ROOT_API

Например, откройте файл HelloWorld.vue и в теге <script> добавьте следующее:

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    console.log(process.env.VUE_APP_ROOT_API)
  },
}
</script>

Если вы скомпилируете приложение со значениями разработки:

  1. npm run serve

Эта команда будет использовать значение .env, и журнал консоли будет отображать: http://localhost/api.

Если вы скомпилируете приложение с производственными значениями:

  1. npm run serve -- --mode=production

Примечание. Здесь важно использовать двойные дефисы для передачи флагов из npm в vue-cli-service.

Вы также можете использовать эту альтернативную команду:

  1. vue-cli-service serve --mode=production

Эта команда будет использовать значение .env.production, и журнал консоли будет отображать: http://www.example.com/api.

По умолчанию Vue CLI поддерживает три режима: «разработка», «тестирование» и «производство». Для получения дополнительной информации об использовании переменных среды с Vue CLI 3 обратитесь к официальной документации.

Шаг 2 — Использование файлов .env с Vue CLI 2

Vue CLI 2 — это предыдущая версия vue-cli. Создав проект Vue.js, вы можете использовать

В своем терминале создайте новый проект Vue.js с помощью vue-cli:

  1. npx vue-cli init webpack vue-cli-two-env-example

В каталоге config есть два файла: dev.env.js и prod.env.js.

Эти файлы используются в режиме разработки и производства. Когда вы запускаете приложение с помощью команды npm run dev, используется файл dev.env.js. Когда вы компилируете проект для производства с помощью команды npm run build, вместо этого используется файл prod.env.js.

Откройте dev.env.js в редакторе кода и добавьте значение ROOT_API:

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ROOT_API: '"http://localhost/api"'
})

Затем откройте prod.env.js в редакторе кода и добавьте значение ROOT_API:

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ROOT_API: '"http://www.example.com/api"'
}

После создания переменной ROOT_API вы можете использовать ее в любом месте Vue через глобальный объект process.env:

process.env.ROOT_API

Например, откройте файл HelloWorld.vue и в теге <script> добавьте следующее:

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    console.log(process.env.ROOT_API)
  },
}
</script>

Если вы скомпилируете приложение с помощью:

  1. npm run dev

Эта команда будет использовать значение dev.env.js, а журнал консоли будет отображать: http://localhost/api.

Если вы скомпилируете приложение с помощью:

  1. npm run build

Эта команда будет использовать значение prod.env.js и сгенерирует приложение в каталоге dist. Перейдите в этот каталог и убедитесь, что значение process.env.ROOT_API использует http://www.example.com/api вместо http://localhost. /апи.

Вы можете работать с разными переменными для каждой отдельной среды, используя готовую конфигурацию dotenv для управления переменными среды.

Заключение

В этой статье вы узнали, как использовать переменные среды в проектах, созданных с помощью Vue CLI 3+ и 2.

Для текущих и будущих проектов рекомендуется использовать @vue/cli в будущем, так как vue-cli устарел.

Если вы хотите узнать больше о Vue.js, посетите нашу тематическую страницу Vue.js, где вы найдете упражнения и проекты по программированию.