Rumah >hujung hadapan web >tutorial js >Mengapa Saya Mendapat 'ralat ReCaptcha: Tiada kunci disediakan' Apabila Menggunakan Pembolehubah .env dalam Nuxt.js?

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

Patricia Arquette
Patricia Arquetteasal
2024-12-03 05:02:09337semak imbas

Why Am I Getting a

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn