# Переменные окружения и режимы работы

Вы можете указать переменные окружения в специальных файлах в корне вашего проекта:

``` bash
.env                # загружается во всех случаях
.env.local          # загружается во всех случаях, игнорируется git
.env.[mode]         # загружается только в указанном режиме работы
.env.[mode].local   # загружается только в указанном режиме работы, игнорируется git
```

Такой `.env` файл просто содержит пары ключ=значение требуемых переменных окружения:

```
FOO=bar
VUE_APP_SECRET=secret
```

Эти переменные будут доступны для всех команд `vue-cli-service`, плагинов и зависимостей.

::: tip Приоритет загрузки переменных окружения
Файл с переменными для определённого режима работы (например, `.env.production`) имеет более высокий приоритет, чем общий файл (например, `.env`).

Кроме того, переменные окружения, которые уже существуют при загрузке Vue CLI имеют наивысший приоритет и не будут перезаписаны значениями из файлов `.env`.
:::

::: warning Предупреждение об использовании NODE_ENV
Если в вашем окружении по умолчанию установлен `NODE_ENV`, вы должны либо удалить его, либо явно установить `NODE_ENV` при выполнении команд `vue-cli-service`.
:::

## Режимы работы

**Режимы работы** — важная часть проектов Vue CLI. По умолчанию, есть три режима работы:

- `development` используется `vue-cli-service serve`
- `production` используется `vue-cli-service build` и `vue-cli-service test:e2e`
- `test` используется `vue-cli-service test:unit`

Обратите внимание, что режим работы отличается от `NODE_ENV`, поскольку режим может устанавливать несколько переменных окружения. Тем не менее, каждый режим устанавливает `NODE_ENV` в такое же значение по умолчанию — например, `NODE_ENV` будет установлен в `"development"` в режиме разработки.

Вы можете установить переменные окружения только для определённого режима работы с помощью постфикса `.env` файла. Например, если создать файл с именем `.env.development` в корне вашего проекта, тогда переменные объявленные в нём будут загружаться только в режиме development.

Вы можете переопределить режим по умолчанию для команды, с помощью опции `--mode`. Например, если необходимо использовать переменные для разработки в команде сборки, добавьте это в свои скрипты `package.json`:

```
"dev-build": "vue-cli-service build --mode development",
```

## Пример: режим Staging

Предположим, что у нас есть приложение с `.env` файлом:

```
VUE_APP_TITLE=My App
```

И следующий `.env.staging` файл:

```
NODE_ENV=production
VUE_APP_TITLE=My App (staging)
```

- `vue-cli-service build` собирает приложение для production, загружает `.env`, `.env.production` и `.env.production.local` если они присутствуют;

- `vue-cli-service build --mode staging` собирает приложение для production в режиме staging, используя `.env`, `.env.staging` и `.env.staging.local` если они присутствуют.

В обоих случаях приложение собирается для production из-за установленного `NODE_ENV`, но в режиме staging, `process.env.VUE_APP_TITLE` будет перезаписываться другим значением.

## Использование переменных окружения в клиентском коде

Только переменные с префиксом `VUE_APP_` статически внедряются в клиентскую сборку используя `webpack.DefinePlugin`. К ним можно получить доступ из кода вашего приложения:

``` js
console.log(process.env.VUE_APP_SECRET)
```

На этапе сборки `process.env.VUE_APP_SECRET` будет заменяться соответствующим значением. Когда в файле указано `VUE_APP_SECRET=secret` — после сборки значением будет `"secret"`.

В дополнение к переменным `VUE_APP_*` также есть две специальные переменные, которые всегда доступны в коде вашего приложения:

- `NODE_ENV` — значение будет `"development"`, `"production"` или `"test"` в зависимости от [режима работы](#режимы-работы) в котором работает приложение.
- `BASE_URL` — соответствует опции `publicPath` в `vue.config.js` и определяет базовый путь по которому опубликовано ваше приложение.

Все разрешённые переменные окружения также будут доступны внутри `public/index.html` как обсуждалось ранее в разделе [HTML - Интерполяции](./html-and-static-assets.md#интерпоnяции).

::: tip Совет
Можно добавлять вычисляемые переменные окружения в `vue.config.js`. Они по-прежнему должны именоваться с префикса `VUE_APP_`. Это может пригодиться например для получения информации о версии `process.env.VUE_APP_VERSION = require('./package.json').version`
:::

## Переменные только для локального окружения

Иногда необходимы переменные окружения, которые не должны быть привязаны к кодовой базе, особенно если ваш проект размещается в публичном репозитории. В таком случае вы должны использовать файл `.env.local`. Локальные env-файлы добавлены в `.gitignore` по умолчанию.

`.local` также могут добавляться к env-файлам специфичным для режима работы, например `.env.development.local` будет загружен во время разработки, и будет игнорироваться git.
