Mengapa Saya Mendapat 'ralat ReCaptcha: Tiada kunci disediakan' Apabila Menggunakan Pembolehubah .env dalam Nuxt.js?

Menggunakan Pembolehubah .env dalam Nuxt.js

Isu:

Apabila mengkonfigurasi ReCaptcha dalam Nuxt.js dengan membaca pembolehubah daripada fail .env, aplikasi gagal dengan "ralat ReCaptcha: Tiada kunci disediakan" ralat log konsol. Isu ini berterusan walaupun mengekodkan kunci secara langsung, mencadangkan masalah membaca pembolehubah .env dalam nuxt.config.

Penyelesaian:

Jika Nuxt.js versi 2.13 atau di atas sedang digunakan, rangka kerja secara automatik menyokong pembolehubah .env. Untuk mengakses pembolehubah daripada .env:

1. Buat fail .env pada akar projek dan tambah kunci dan nilai, cth.:

   RECAPTCHA_SITE_KEY=6L....

2. Dalam nuxt.config.js, nyatakan pembolehubah di bawah sama ada publicRuntimeConfig atau privateRuntimeConfig, bergantung pada tahap akses:

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

Perbezaan:

• publicRuntimeConfig boleh diakses di mana-mana sahaja.
• privateRuntimeConfig hanya boleh digunakan semasa SSR (server-side pemaparan).

Contoh:

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

Untuk Nuxt.js Versi 3:

Tentukan pembolehubah dalam runtimeConfig in nuxt.config.js:

import { defineNuxtConfig } from 'nuxt3'

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

Dalam komponen atau komposit:

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

Untuk maklumat tambahan, rujuk dokumentasi rasmi Nuxt.js:
https://nuxtjs .org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

Atas ialah kandungan terperinci Mengapa Saya Mendapat 'ralat ReCaptcha: Tiada kunci disediakan' Apabila Menggunakan Pembolehubah .env dalam Nuxt.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!