我的项目根目录中有 .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 props

你知道如何解决它吗？

编辑： 我尝试通过 @kissu 推荐和我在这里找到的示例更新我的 nuxt.config：https://www.npmjs.com/package/@nuxtjs/recaptcha 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'
       }
  }
}

如果你的 Nuxt 版本是2.13或以上, you don't需要使用@nuxtjs/dotenv或类似的东西，因为它已经备份到框架中。

要使用某些变量，您需要有一个.env文件位于项目的根目录下。 git 应该忽略这一点。然后你可以在那里输入一些键，例如

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

In your nuxt.config.js，您必须将它们输入到 2 个对象中，具体取决于您的用例publicRuntimeConfig or privateRuntimeConfig:

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

差异: publicRuntimeConfig基本上可以在任何地方使用，同时privateRuntimeConfig只能在 SSR 期间使用（密钥只有在未发送到浏览器时才能保持私有）。

一个流行的用例privateRuntimeConfig是用它来nuxtServerInit https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle/#server或者在构建过程中（或者yarn build or yarn generate）以使用无头 CMS 的 API 调用填充应用程序。

更多信息可以在这篇博文中找到：https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/ 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

有时，语法可能略有不同 https://github.com/nuxt-community/gtm-module#runtime-config，在这种情况下请参阅 Nuxt 模块文档。

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

PS：如果你使用target: server（默认值），您可以yarn build and yarn start将您的应用程序部署到生产环境。然后，更改您想要的任何环境变量yarn start再次。无需重建。由此得名运行时配置!

Nuxt3更新

正如中提到的the docs https://nuxt.com/docs/bridge/overview#update-runtime-config，您可以对 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)
}

这里是官方文档 https://v3.nuxtjs.org/api/composables/use-runtime-config#useruntimeconfig对于那部分。