为什么在 Nuxt.js 中使用 .env 变量时出现'ReCaptcha 错误：未提供密钥”？

在 Nuxt.js 中使用 .env 变量

问题：

通过读取变量在 Nuxt.js 中配置 ReCaptcha 时从 .env 文件中，应用程序失败并显示“ReCaptcha 错误：未提供密钥”控制台日志错误。尽管直接对密钥进行硬编码，但问题仍然存在，这表明在读取 nuxt.config 中的 .env 变量时出现问题。

解决方案：

如果 Nuxt.js 版本 2.13或以上正在使用，框架自动支持.env变量。要从 .env 访问变量：

1. 在项目根目录创建 .env 文件并添加键和值，例如：

   RECAPTCHA_SITE_KEY=6L....

2. 在 nuxt.config.js 中，根据访问权限指定 publicRuntimeConfig 或 privateRuntimeConfig 下的变量level:

   export default {
    publicRuntimeConfig: {
       recaptcha: {
         siteKey: process.env.RECAPTCHA_SITE_KEY,
         version: 3,
         size: 'compact'
       }
     }
   }

区别：

• publicRuntimeConfig 可以在任何地方访问。
• privateRuntimeConfig 只能是在 SSR 期间使用（服务器端渲染）。

示例：

this.$config.myPublicVariable  // accessing from Vue.js file

对于 Nuxt.js 版本 3：

定义变量在runtimeConfig中nuxt.config.js:

import { defineNuxtConfig } from 'nuxt3'

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

在组件或可组合项中：

import { useRuntimeConfig } from '#app'
const config = useRuntimeConfig()

有关更多信息，请参阅官方 Nuxt.js 文档：
https://nuxtjs .org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

以上是为什么在 Nuxt.js 中使用 .env 变量时出现'ReCaptcha 错误：未提供密钥”？的详细内容。更多信息请关注PHP中文网其他相关文章！