CODEGURU

Используем .env с Nuxt.js

В любом проекте есть информация, хардкодить которую крайне нежелательно. Это могут быть ключи от облачных сервисов, пароль от базы данных и т.д. Было бы здорово вынести всё это в отдельный файл. Кроме того, различные параметры проекта могут меняться. Например, при разработке используется один адрес API, а при сборке для production — другой. Было бы здорово и это как-то автоматизировать. И вот тут нам помогут переменные окружения. Очень удобно — создаём в корне проекта файл .env и кладём в него все необходимые переменные. Осталось только разобраться как прикрутить это к Nuxt.js.

В этом нам поможет пакет dotenv. Устанавливаем его:

npm i dotenv

Затем переходим в файл nuxt.config.js и прикручиваем там dotenv:

...
const env = require("dotenv").config()
...

module.exports = {
    ...
    env: env.parsed,
    ...
}

Теперь информация, которая есть в файле .env доступна вам в любом компоненте. Например, мы храним там ключ от firebase:

FIREBASE_KEY=aldsfasiduy398y4230

И мы можем использовать его в компоненте:

data() {
    return {
      firebaseKey: process.env.FIREBASE_KEY
    }
}

И не забывайте, что .env файлы необходимо добавить в .gitignore, чтобы они не попали в репозиторий, так как информация в них не предназначена для посторонних глаз.