為什麼在 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中文網其他相關文章！