Bagaimana untuk Mengakses Pembolehubah Persekitaran dalam Projek Nuxt 2 atau 3 Anda?

DDD
Lepaskan: 2024-11-11 17:58:02
asal
183 orang telah melayarinya

How to Access Environment Variables in Your Nuxt 2 or 3 Project?

Mengakses Pembolehubah Persekitaran dalam Nuxt 2 atau 3: .env Made Easy

Apabila menggunakan pembolehubah persekitaran dalam projek Nuxt anda, sama ada Nuxt 2 atau 3, adalah penting untuk memahami pendekatan yang betul. Dalam artikel ini, kami akan meneroka cara membaca pembolehubah persekitaran daripada fail .env anda dalam konfigurasi Nuxt.

Dalam Nuxt 2.13 atau lebih tinggi, penggunaan @nuxtjs/dotenv tidak lagi diperlukan kerana rangka kerja asli menyokong pembolehubah persekitaran. Untuk mentakrifkan pembolehubah anda, buat fail .env pada akar projek anda dan isikan dengan pasangan nilai kunci.

Nuxt 2.13 atau Di Atas

Dalam nuxt anda .config.js, tentukan pembolehubah persekitaran anda menggunakan publicRuntimeConfig atau privateRuntimeConfig, bergantung pada penggunaan yang dimaksudkan.

export default {
  publicRuntimeConfig: {
    myPublicVariable: process.env.PUBLIC_VARIABLE,
  },
  privateRuntimeConfig: {
    myPrivateToken: process.env.PRIVATE_TOKEN,
  },
};
Salin selepas log masuk

Nuxt 3

Nuxt 3 memperkenalkan objek runtimeConfig dalam nuxt.config.js. Tentukan pembolehubah persekitaran anda di sini:

import { defineNuxtConfig } from 'nuxt3';

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      secret: process.env.SECRET,
    },
  },
});
Salin selepas log masuk

Untuk mengakses pembolehubah ini dalam komponen anda, gunakan ini.$config dalam Nuxt 2 dan gunakanRuntimeConfig() dalam Nuxt 3.

Mengakses Persekitaran Pembolehubah dalam Nuxt.config

Untuk Nuxt.config, anda boleh mengakses terus pembolehubah persekitaran menggunakan process.env.VARIABLE_NAME.

export default {
  modules: [
    ['@nuxtjs/recaptcha', {
      siteKey: process.env.RECAPTCHA_SITE_KEY,
      version: 3,
      size: 'compact',
    }],
  ],
};
Salin selepas log masuk

Dengan mengikuti langkah ini, anda boleh menggunakan dengan lancar pembolehubah persekitaran dalam projek Nuxt anda. Sila ambil perhatian bahawa sintaks mungkin berbeza sedikit bergantung pada pakej Nuxt yang anda gunakan. Rujuk dokumentasi rasmi untuk panduan khusus.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Pembolehubah Persekitaran dalam Projek Nuxt 2 atau 3 Anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan