Rumah >hujung hadapan web >tutorial js >Mengapa Saya Mendapat 'ralat ReCaptcha: Tiada kunci disediakan' Apabila 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:
Buat fail .env pada akar projek dan tambah kunci dan nilai, cth.:
RECAPTCHA_SITE_KEY=6L....
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:
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!