Nuxt 2 または 3 で .env 変数にアクセスする方法: 包括的なソリューション

Nuxt 2 または 3 の .env 変数: 包括的なソリューション

Nuxt.js を使用すると、.env ファイルを通じて環境変数をシームレスに管理できますが、問題が発生することはありません。珍しい。このガイドでは、Nuxt の設定で .env 変数にアクセスするという繰り返し発生する問題に対する段階的な解決策を提供します。

問題の説明

読み取りを試行中に Nuxt アプリケーションでエラーが発生しました。 nuxt.config.js または別のモジュール内の .env からの環境変数。コンソール エラーは、.env ファイルで指定されているにもかかわらずキーが欠落していることを示します。

根本原因

Nuxt の以前のバージョンでは、.env 変数はアプリケーションに自動的にロードされませんでした。読み込みプロセスを容易にするために、@nuxtjs/dotenv などの追加パッケージが必要でした。ただし、Nuxt 2.13 の導入により、dotenv 処理がフレームワークに組み込まれ、外部パッケージの必要性がなくなりました。

解決策

Nuxt 2.13 以降の場合:

1. .env ファイルを作成します: .env ファイルをプロジェクトのルートに配置し、その中に環境変数を指定します。 Git によって無視されていることを確認します。
2. 構成を定義します: nuxt.config.js で、publicRuntimeConfig または privateRuntimeConfig を使用して .env 変数を定義します。

export default {
    publicRuntimeConfig: {
        myPublicVariable: process.env.PUBLIC_VARIABLE,
    },
    privateRuntimeConfig: {
        myPrivateToken: process.env.PRIVATE_TOKEN,
   }
}

3. 変数にアクセスします: これを使用します。 .vue ファイルまたはプラグイン内の変数にアクセスするための構成名が続きます。例: this.myPublicVariable.

Nuxt 3 の場合:

1. runtimeConfig を構成します: nuxt.config.js 内、ランタイム構成を定義します。
2. 変数を定義します: パブリック オブジェクト内で、環境変数をそれぞれのキーに割り当てます。
3. 変数にアクセスします: useRuntimeConfig() を利用して、コンポーネントまたはコンポーザブル内の変数にアクセスします。

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
    runtimeConfig: {
        public: {
            secret: process.env.SECRET,
        }
    }
}

追加のヒント

• サーバー モード (ターゲット: サーバー) をターゲットにする場合、次のことができます。再構築せずに環境変数を更新します。もう一度yarn startを実行するだけです。
• RuntimeConfigの詳細については、Nuxt.jsの公式ドキュメントを参照してください。

結論

これらの手順に従うことで、効果的に使用できます。 Nuxt 2 または 3 の .env 変数。覚えておいてください。.env ファイルは、機密情報や設定値を保存し、一般に公開されないようにするのに貴重です。

以上がNuxt 2 または 3 で .env 変数にアクセスする方法: 包括的なソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。