Bagaimana untuk Menggunakan Pembolehubah .env dalam Nuxt 2 dan 3?

Menggunakan Pembolehubah .env dalam Nuxt 2 atau 3

Apabila memasukkan konfigurasi luaran ke dalam Nuxt, anda perlu memanfaatkan fail .env, di mana data sensitif boleh disimpan dan dirujuk kemudian dalam konfigurasi Nuxt. Berikut ialah panduan komprehensif untuk mencapai matlamat ini.

Dalam Nuxt 2.13 dan ke atas, sokongan .env terbina dalam. Untuk menggunakannya, ikuti langkah berikut:

• Buat fail .env dalam akar projek anda.

• Tentukan pembolehubah anda, seperti:

  MY_VARIABLE="Hello World"

  Salin selepas log masuk

• Dalam nuxt.config.js anda, import nilai .env ke dalam objek publicRuntimeConfig atau privateRuntimeConfig:

  export default {
  publicRuntimeConfig: {
    myPublicVariable: process.env.MY_VARIABLE,
  },
  privateRuntimeConfig: {
    myPrivateVariable: process.env.MY_PRIVATE_VARIABLE,
  },
  }

  Salin selepas log masuk

Dalam Nuxt 3, prosesnya berbeza sedikit:

• Dalam nuxt.config.js:

  import { defineNuxtConfig } from 'nuxt3'
  
  export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      myPublicVariable: process.env.MY_VARIABLE,
    },
  },
  })

  Salin selepas log masuk

• Dalam mana-mana komponen:

  <script setup lang="ts">
  const config = useRuntimeConfig()
  config.myPublicVariable
  </script>

  Salin selepas log masuk

• Dalam komposit:

  export default () => {
  const config = useRuntimeConfig()
  console.log(config.myPublicVariable)
  }

  Salin selepas log masuk

Apabila mentakrifkan pembolehubah dalam fail .env anda, ingat untuk mengelak daripada menggunakan ruang dan watak istimewa. Contohnya:

API_URL=https://example.com/api

Kini, anda boleh mengakses pembolehubah ini dengan mudah di mana-mana sahaja dalam aplikasi Nuxt anda. Jika menghadapi sebarang masalah, rujuk dokumentasi rasmi Nuxt untuk panduan lanjut.

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Pembolehubah .env dalam Nuxt 2 dan 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!