Как управлять переменными окружения в приложении Nuxt.js? (Различия между Nuxt 2 и Nuxt 3)

Управление переменными окружения в приложениях Nuxt.js - важный аспект, который позволяет разрабатывать приложения, адаптирующиеся к различным средам, таким как разработка, тестирование и продакшн. Рассмотрим, как это делается в Nuxt 2 и Nuxt 3.

Nuxt 2

В Nuxt 2 переменные окружения можно задавать с помощью файла .env и пакета dotenv. Обычно, для работы с переменными окружения:

1. Установите пакет dotenv:

npm install dotenv

2. Создайте файл .env в корневой директории вашего проекта:

API_URL=https://api.example.com
ANOTHER_VARIABLE=value123

3. Настройте Nuxt для использования этих переменных. Откройте файл nuxt.config.js и добавьте:

require('dotenv').config(); // Импортируйте dotenv

export default {
  env: {
    apiUrl: process.env.API_URL, // Доступ к переменным окружения
    anotherVariable: process.env.ANOTHER_VARIABLE
  }
};

Теперь вы можете получить доступ к переменным окружения через process.env в любом месте вашего проекта:

console.log(process.env.apiUrl); // https://api.example.com

Nuxt 3

В Nuxt 3 управление переменными окружения стало немного проще благодаря встроенной поддержке. Здесь рассмотрим, как использовать переменные окружения в Nuxt 3.

1. Создайте файл .env так же, как и в Nuxt 2:

API_URL=https://api.example.com

2. Если вы используете Nuxt 3, переменные окружения автоматически доступны через useRuntimeConfig(). Настройка в nuxt.config.ts не требуется, чтобы использовать переменные окружения, но можно указать их для удобного управления.

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiUrl: process.env.API_URL // Доступно на стороне клиента
    },
    private: {
      secret: process.env.SECRET // Доступно только на сервере
    }
  }
});

3. Доступ к переменным окружения также осуществляется через useRuntimeConfig():

const config = useRuntimeConfig();
console.log(config.public.apiUrl); // https://api.example.com

Краткое сравнение

• Nuxt 2: Используйте пакет dotenv и доступ к переменным через process.env.
• Nuxt 3: Встроенная поддержка useRuntimeConfig для легкого доступа к переменным окружения, разделение на public и private.

Это основные аспекты управления переменными окружения в Nuxt.js. Понимание этих различий поможет вам лучше конфигурировать приложения в различных средах разработки и упрощать процесс настройки.