Переменные среды NUXT.JS (без дотенва)

Эта статья охватывает NUXT для версий 2.12 и ниже. Для 2.13 и выше, Теперь вы можете использовать $ config. с участием publicruntimeconfig. и Частный runtimeconfig.

Nuxt’s Process.env Работает таинственными способами. Надеюсь, это демистифицирует некоторые из них. Я собираюсь покрыть Доценв модуль в другом посте.

1. WebPack заменяет Process.env.your_Variable.
2. Переменные доступа с использованием context.env
3. Автоматические переменные с использованием NUXT_ENV_
4. Объявленные переменные с использованием NUXT.config.js

WebPack заменяет Process.env.your_variable Клиент

Представьте, что я установил системную среду переменной Nuxt_env_cool_word со значением бессмыслица . Когда клиентская сторона JS генерируется, буквальная строка Process.env. Nuxt_env_cool_word это заменил , по WebPack, с 'Jabberwocky' в сгенерированном клиенте js. Этот фрагмент кода будет работать на стороне клиента:

с сгенерированным клиентом JS, содержащим

    var o = {data: function() {
            return { processEnv: "jabberwocky" };
          }},

Следующий пример не Не будет работать на стороне клиента в стандартной настройке:

Значение Nuxt_env_cool_word Покажу при нагрузке Server Side HTML, который немедленно исчезает, когда клиентская сторона SPA JS пинает. Хотя строка не заменяется на сооружение сервера, все переменные среды доступны на стороне сервера.

Переменные доступа Клиентская сторона с контекстом.env

Хотя прямой доступ через Process.env Не работает на стороне клиента, еще есть способ использовать переменные. Nuxt.js контекст заполняется объявленными и автоматическими переменными.

Пример сгенерированного кода:

   app.context = {
      isStatic: process.static,
      isDev: true,
      isHMR: false,
      app,

      payload: context.payload,
      error: context.error,
      base: '/',
      env: {"NUXT_ENV_COOL_WORD":"this is pretty cool"}
    }

контекст предоставляется:

• асинхдата
• принести
• промежуточное программное обеспечение
• плагины
• NUXTSERVERINIT (только сервер)

example.vue.vue.

My-Mardware.js.js

export default function({ env }) {
  console.log(env.NUXT_ENV_COOL_WORD);
}

Автоматические переменные ENV с использованием NUXT_ENV_

Nuxt.js env страница состояния

Если вы определяете переменные среды, начиная с NUXT_ENV_ на этапе сборки (F.Ex. Nuxt Build, они будут автоматически вводиться в технологическую среду.

Если есть переменная среды, которая начинается с Nuxt_env_ Затем этот ключ и значение будут включены в сгенерированные файлы JS и будут доступны из Process.env на сервере, так и на стороне клиента.

Если нет Nuxt_env_ Затем переменная не будет включена в сторону клиента JS автоматически; и поэтому:

• Не может быть использована сторона клиента,
• но все еще можно использовать серверную сторону

Это может быть проверено:

1. Добавление nuxt_env_cool_word к вашим переменным среды системы,
2. Перезапустить, чтобы убедиться, что это на всех процессах
3. Тест, используя рабочий пример выше

Есть способ получить это на работу, используя Доценв модуль. Это будет в другом посте.

Объявлены переменные env с использованием NUXT.config.js

В пределах nuxt.config.js , можно определить (псевдо) переменные среды. Они могут быть использованы на стороне клиента и сервера без проблем, а также пройти вдоль переменных среды, которые не имеют Nuxt_env_ префикс

export default {
/* ... */
  env: {
    NUXT_ENV_COOL_WORD: "a default value that can be overridden",
    SOME_OTHER_VALUE: "can't be overridden - missing NUXT_ENV_ prefix",
    CONDITIONAL: process.env.CONDITIONAL || "some default value" //if can't use NUXT_ENV_
    SOME_VARIABLE: process.env.SOME_VARIABLE // Ensure variable reaches the client
  }
}

Эти переменные также доступны на контекст .env.

Переменные с Nuxt_env_ переоценены переменными среды того же имени. Это очень полезно для развития.

Надеюсь это поможет!

Оригинал: “https://dev.to/deeja/nuxt-js-environment-variables-without-dotenv-4oj8”