Nuxt 3 — как прокинуть переменные окружения в production?

В Nuxt.js версии 3.x для прокидывания переменных окружения в production используется новый механизм, основанный на использовании файла .env. Вам потребуется выполнить несколько шагов для этого.

Шаг 1: Создать файл .env.production в корневой папке вашего проекта. В этом файле вы можете указать все необходимые переменные окружения и их значения. Например:

API_KEY=your_api_key
SECRET=your_secret

Шаг 2: В файле nuxt.config.js добавьте следующий код:

export default {
  env: {
    API_KEY: process.env.API_KEY,
    SECRET: process.env.SECRET
  }
};

Шаг 3: Установите и настройте dotenv в вашем проекте Nuxt.js, чтобы использовать файлы .env. Установите пакет, выполнив команду:

npm install --save-dev @nuxtjs/dotenv

Шаг 4: В файле nuxt.config.js добавьте модуль dotenv:

export default {
  buildModules: [
    '@nuxtjs/dotenv'
  ]
};

Шаг 5: Убедитесь, что ваш .env.production файл добавлен в файл .gitignore, чтобы не сохранять ваши секреты и ключи в репозитории.

Шаг 6: Запустите ваш проект в режиме production:

npm run build
npm run start

Теперь ваши переменные окружения будут доступны во время выполнения на стороне сервера и на стороне клиента в процессе сборки. Например, вы можете использовать их в коде своего приложения, например:

asyncData() {
  const apiKey = process.env.API_KEY;
  const secret = process.env.SECRET;
  // делаем что-то с переменными окружения
}

Обратите внимание, что в режиме development переменные окружения уже доступны без необходимости использования файлов .env. Вы можете просто добавить переменные окружения в файле nuxt.config.js, например:

export default {
  env: {
    API_KEY: 'your_development_api_key',
    SECRET: 'your_development_secret'
  }
};

Теперь вы знаете, как прокинуть переменные окружения в режиме production с помощью Nuxt.js 3.x.