如何在Nuxt 2或3中使用.env变量？

Question

我在项目根目录中有一个 .env 文件，在我的 nuxt 配置文件中，我正在使用变量来配置 ReCaptcha，就像这样：

import dotenv from 'dotenv'
dotenv.config()

export default {
    modules: [
        ['@nuxtjs/recaptcha', {
          siteKey: process.env.RECAPTCHA_SITE_KEY,
          version: 3,
          size: 'compact'
        }],
    ]
}

并且在 .env 文件中像这样：

RECAPTCHA_SITE_KEY=6L....

但是应用程序始终失败，并出现以下控制台日志错误:

ReCaptcha错误：未提供密钥

当我直接硬编码ReCaptcha密钥时，像这样：siteKey: 6L....应用程序开始工作，因此我猜问题出在读取nuxt.config中的.env属性上

你有任何想法如何解决它吗？

编辑： 我尝试根据@kissu的建议和我在这里找到的示例更新了我的nuxt.config：https://www.npmjs.com/package/@nuxtjs/recaptcha

所以有一个新的nuxt.config也不起作用：

export default {
    modules: [
       '@nuxtjs/recaptcha',
    ],
    publicRuntimeConfig: {
       recaptcha: {
         siteKey: process.env.RECAPTCHA_SITE_KEY,
         version: 3,
         size: 'compact'
       }
  }
}

- Denis Stephanov

---

Nuxt 的版本是多少？ - Boussadjra Brahim

在这个版本中，您不需要使用 dotenv 模块。 - Boussadjra Brahim

@BoussadjraBrahim 我尝试删除它，但仍然不起作用。 - Denis Stephanov

你尝试过使用这个吗？process.env.NUXT_ENV_RECAPTCHA_SITE_KEY https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env#automatic-injection-of-environment-variables - Kunukn

很抱歉，没有。:/ - Denis Stephanov

Answer 1

如果您的Nuxt版本是2.13或更高版本，您无需使用@nuxtjs/dotenv或类似的东西，因为它已经内置在框架中。

要使用一些变量，您需要在项目的根目录下有一个.env文件。这个文件应该被git忽略。然后您可以在其中输入一些键值。

PUBLIC_VARIABLE="https://my-cool-website.com"
PRIVATE_TOKEN="1234qwer"

在你的 `nuxt.config.js` 文件中，你需要将这些内容输入到两个对象中，具体取决于你的使用情况，可以是 `publicRuntimeConfig` 或者 `privateRuntimeConfig`。

export default {
  publicRuntimeConfig: {
    myPublicVariable: process.env.PUBLIC_VARIABLE,
  },
  privateRuntimeConfig: {
    myPrivateToken: process.env.PRIVATE_TOKEN
  }
}

区别： publicRuntimeConfig 基本上可以在任何地方使用，而 privateRuntimeConfig 只能在 SSR（仅当密钥未传递给浏览器时才能保持私有）期间使用。 privateRuntimeConfig 的一个常见用例是在 nuxtServerInit 或构建过程中（使用 yarn build 或 yarn generate）使用它来填充应用程序的无头 CMS 的 API 调用。

有关更多信息，请参阅此博文：https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

---

然后，您将能够直接在任何.vue文件中访问它。

this.$config.myPublicVariable

你还可以通过以下语法在Nuxt的/plugins目录中访问它。

export default ({ $axios, $config: { myPublicVariable } }) => {
  $axios.defaults.baseURL = myPublicVariable
}

如果你需要在Nuxt模块中使用这个变量，或者在你的`nuxt.config.js`文件的任何键中使用它，直接写入即可。

process.env.PRIVATE_TOKEN

有时候，语法可能会有一些不同，在这种情况下，请参考您的Nuxt模块文档。

// for @nuxtjs/gtm
publicRuntimeConfig: {
  gtm: {
    id: process.env.GOOGLE_TAG_MANAGER_ID
  }
},

---

PS：如果你使用target: server（默认值），你可以使用yarn build和yarn start将你的应用部署到生产环境。然后，修改任何你想要的环境变量并再次使用yarn start。这样就不需要重新构建了。因此，它被称为RuntimeConfig！

Nuxt3更新

如文档中所述，你可以在Nuxt3中使用以下方法

nuxt.config.js

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      secret: process.env.SECRET,
    }
  }
}

在任何组件中

<script setup lang="ts">
  const config = useRuntimeConfig()
  config.secret
</script>

在一个像这样的可组合性中，如/composables/test.js。

export default () => {
  const config = useRuntimeConfig()
  console.log(config.secret)
}

---

这是关于那部分的官方文档。

- kissu

---

谢谢您的回答，我按照您的建议进行了编辑，但仍然出现相同的错误。我也更新了我的问题。 - Denis Stephanov

@PirateApp 你可以通过以下方式实现这一目标：https://stackoverflow.com/a/68338032/8816585 - kissu

publicRuntimeConfig 在 Nuxt 3 中已更名为 runtimeConfig。 - Lengo

@kissu，第一个链接（编辑：用于Nuxt3）已损坏。 - undefined

@DanielDanielecki 嗯，我不太确定如何在旧存储库和新存储库之间找到对应关系（ID不匹配）。我目前只是将其删除了，可能也不是什么大问题。 - undefined

Answer 2

你也可以在Nuxt的nuxt.config.js文件中使用env属性。

export default {
  // Environment variables
  env: {
    myVariable: process.env.NUXT_ENV_MY_VAR
  },
  ...
}

然后在你的插件中：

const myVar = process.env.myVariable

- ctwhome

Answer 3

这很奇怪，因为在 Nuxt 3 中我们无法访问 process.env

在 Nuxt 3 中，我们被邀请使用运行时配置，但这并不总是方便的，因为需要 Nuxt 应用程序上下文。

但在某些情况下，如果我们有一些简单的库，并且不想将其包装在插件或组合函数中，则通过 vite / webpack 声明全局变量是最好的选择：

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    define: {
      MY_API_URL: JSON.stringify(process.env.MY_API_URL)
    }
  }
})

然后你就可以在任何文件中使用，而不必跳着玩铃鼓：

// some-file.ts
console.log('global var:', MY_API_URL) // replaced by vite/webpack in real value

如果您想像以前一样使用某些环境变量，请定义完全限定名称：

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    define: {
      // dont forgot about JSON.stringify, because it adds quotes
      'process.env.APP_URL': JSON.stringify(process.env.APP_URL)
      // for example
      'process.env.APP_URL': '"https://myawesomesite.com"'
    }
  }
})

然后在你的代码中使用它：

console.log(process.env.APP_URL)

在浏览器源代码中检查此代码，您将看到：

console.log("https://myawesomesite.com")

这意味着在 vite.define 部分中定义的任何变量只是编译时替换的模式。

- Lukas Pierce

---

vite：在defineNuxtConfig中只会抛出500错误。我是否忽略了您的建议？您说得很对，Nuxt会让一些本应“正常工作”的事情变得很烦人，由于缺乏环境变量，使用普通库也变得相当有限。 - dapug

我认为你正在尝试在客户端代码中使用proccess.env.SOME_VARIABLE，所以在这种情况下，你需要定义完整的名称，如'proccess.env.SOME_VARIABLE'，因为它只是一个字符串模式，将在编译时被vite替换。请尝试我的更新示例。 - Lukas Pierce

Answer 4

对于v3，官方文档中有一个精确的描述

您可以在nuxt.config.[ts,js]文件中定义一个runtimeConfig条目，作为初始/默认值：

export default defineNuxtConfig({
  runtimeConfig: {
    recaptchaSiteKey: 'default value' // This key is "private" and will only be available within server-side
  }
}

您也可以使用环境变量来初始化 runtimeConfig，但它是在构建后静态编写的。 但是您可以通过使用以下环境变量在运行时覆盖该值：

NUXT_RECAPTCHA_SITE_KEY=SOMETHING DYNAMIC

如果您需要在客户端使用配置，则需要使用公共属性。

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      recaptchaSiteKey: 'default value' // will be also exposed to the client-side
    }
  }
}

请注意环境变量中的PUBLIC部分：

NUXT_PUBLIC_RECAPTCHA_SITE_KEY=SOMETHING DYNAMIC

- spe92

---

让我使用这个答案，帮助那些与我一样遇到困难的人。对我来说，这个答案是正确的，只是强调一个细节，即默认值必须存在！如果你设置了 recaptchaSiteKey: process.env.RECAPTHA_SITE_KEY ，但在构建时没有这个 Env 变量，将无法在运行时稍后尝试覆盖它。问题不是 runtimeconfig.public.recaptchaSiteKey 为空，而是它甚至不存在。所以别忘了设置一个默认值。 - Cesc

这些需要以NUXT_为前缀吗？ - Miguel Stevens

@MiguelStevens 是的，据我所知，没有其他前缀的话是无法做到的。 - spe92

Answer 5

很容易。以下是一个使用axios/nuxt的示例：

1. 在.env文件中定义变量：

   baseUrl=http://localhost:1337

2. 将该变量添加到nuxt.config.js的env对象中（并在axios配置中使用它）：

   export default {env: {baseUrl: process.env.baseUrl},axios: {baseURL: process.env.baseUrl},}

3. 在任何文件中都可以使用env变量，例如：

   console.log(process.env.baseUrl)

注意：console.log(process.env)会输出 {}，但console.log(process.env.baseUrl)仍然会输出您的值！

- user2912903

---

你不应该使用 process.env.baseUrl，而应该使用我在答案中解释的 myPublicVariable。 - kissu

Answer 6

在 nuxt3 rc11 中，需要在 nuxt.conf.ts 文件中进行配置：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      locale: {
        defaultLocale: process.env.NUXT_I18N_LOCALE,
        fallbackLocale: process.env.NUXT_I18N_FALLBACK_LOCALE,
      }
    }
  },
...

并且在 .env 文件中：

NUXT_I18N_LOCALE=tr
NUXT_I18N_FALLBACK_LOCALE=en

public：非常重要，否则无法读取并会出现未定义错误。

- Alp Altunel

Answer 7

对于Nuxt 3，首先创建你的.env文件。

# .env
HELLO="World"

然后将您的HELLO环境放在nuxt.config.ts中的runtimeConfig.public下。

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      HELLO: process.env.HELLO
    }
  },
  devtools: { enabled: true }
})

然后在您的.vue文件中，使用useRuntimeConfig()方法访问它。

<!-- In your [app/componentName].vue -->

<template>
  Hello {{useRuntimeConfig().public.HELLO}}.
</template>

<!-- Or -->

<template>
  Hello {{helloValue}}.
</template>

<script>
const config = useRuntimeConfig();
const helloValue = config.public.HELLO;
</script>

- Mot

Answer 8

我不确定这只是我一个人的问题，但是config.myVar似乎并不存在（或者不再存在？）对于一个public（客户端）的情况来说。当我在控制台输出config时，我可以清楚地看到它，console.log({ config })给我返回了。

话虽如此，只有通过config.public.myVar才能正常访问它。

为了完整起见，我将发送我的剩余设置。

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      recaptchaSiteKey: process.env.RECAPTCHA_SITE_KEY,
    },
  },
})

.env（位于根目录位置）

RECAPTCHA_SITE_KEY=123

可组合/组件

import { VueReCaptcha } from 'vue-recaptcha-v3'
import { RuntimeConfig } from 'nuxt/schema'
import { useNuxtApp } from '#app'

const config: RuntimeConfig = useRuntimeConfig()

const { vueApp } = useNuxtApp()
vueApp.use(VueReCaptcha, {
  siteKey: config.public.recaptchaSiteKey,
  loaderOptions: {
    autoHideBadge: true,
    renderParameters: {
      hl: 'en',
    },
  },
})

- Daniel Danielecki