Nuxt 2 および 3 で .env 変数を使用する方法は?

Nuxt 2 または 3 での .env 変数の使用

外部設定を Nuxt に組み込む場合は、.env ファイルを利用する必要があります。機密データは後から Nuxt 設定に保存して参照できます。これを達成するための包括的なガイドは次のとおりです。

Nuxt 2.13 以降では、.env サポートが組み込まれています。これを利用するには、次の手順に従います。

• プロジェクト ルートに .env ファイルを作成します。

• 次のような変数を定義します。

  MY_VARIABLE="Hello World"

  ログイン後にコピー

• nuxt.config.js で、.env 値を publicRuntimeConfig または privateRuntimeConfig オブジェクトにインポートします。

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

  ログイン後にコピー

Nuxt 3 では、プロセスは次のようになります。若干異なります:

• nuxt.config.js 内:

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

  ログイン後にコピー

• 任意のコンポーネント内:

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

  ログイン後にコピー

• コンポーザブル内:

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

  ログイン後にコピー

.env ファイルで変数を定義するときは、スペースや特殊文字の使用を避けるようにしてください。例:

API_URL=https://example.com/api

これで、Nuxt アプリケーションのどこからでもこれらの変数に簡単にアクセスできるようになりました。問題が発生した場合は、Nuxt の公式ドキュメントを参照して詳細なガイダンスを確認してください。

以上がNuxt 2 および 3 で .env 変数を使用する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。