トップ > JavaScript > Nuxtで.envファイルを使って環境変数を設定する

Nuxtで.envファイルを使って環境変数を設定する

JavaScript

スポンサーリンク

.env ファイルまたは dotenv ファイルは、アプリケーションの環境定数を制御するためのシンプルなテキスト設定ファイルです。

ローカル環境、ステージング環境、プロダクション環境の間では、アプリケーションの大部分は変更されません。

しかし、多くのアプリケーションでは、環境間でいくつかのコンフィギュレーションを変更する必要がある場合があります。

環境間で変更する一般的な構成には、URLやAPIキーなどがありますが、これらに限定されません。

.envファイルはどのようなものか？

.envファイルは、改行されたテキストファイルで、各改行が1つの変数を表しています。慣例として、.envの変数名は、大文字の単語をアンダースコアで区切って表記します。変数名の後には「=」が続き、さらに「=」の後には値が続きます。

VARIABLE_NAME=value

dotenvモジュールのインストール

Nuxt で .env ファイルを使用するには，まず Nuxt の dotenv モジュールをインストールする必要があります．

モジュールをインストールするには、ターミナルを開き、プロジェクトのルートに移動します。 プロジェクトのルートから次のコマンドを実行します。

$ npm install @nuxtjs/dotenv

dotenvモジュールの登録

モジュールがインストールされたら、モジュールを登録する必要があります。 モジュールを登録するには、nuxt.config.jsファイルを開き、buildModules配列に移動して、次のように追加します。

nuxtjs/dotenvを以下のように追加します。

buildModules: [
    '@nuxtjs/dotenv'
],

.envファイルの作成

モジュールの登録が完了したら、.envファイルを作成します。

お気に入りのコードエディタでプロジェクトを開き、プロジェクトのルートに.envという新しいファイルを作成します。 .envファイルを作成したら、最初の.env変数を作成する準備ができました。.envファイルを開き、テスト変数を作成します。

TEST_VARIABLE=Hello world

.env変数へのアクセス

dotenv モジュールのインストールと .env ファイルの作成が完了したら、Application で変数を参照するのは簡単です。 .envファイルが期待通りに動作していることを確認するために、Nuxtのホームページ（/pages/index.vue）を開き、マウントされたフックを作成・移動してください。

マウントされたフックの中で、.env変数をconsole.log()してみてください。 .envファイルを参照するには、参照したい変数の名前の前にprocess.env.を付ける必要があります。

mounted() {
    console.log(process.env.TEST_VARIABLE)
}