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

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,
  },
};

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,
    },
  },
});

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',
    }],
  ],
};

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!