ロゴテキスト ロゴ

    Nuxtで環境変数を使う

    Nuxtで環境変数を使う

    Nuxt.jsで環境変数を使ってみます。


    手順はとてもシンプルで以下の2つをやればOKです!

    • 1..env に値を設定
    • 2.nuxt.config.jsで利用する値の設定

    検証した環境

    1 nuxt 2.14.3

    .envを作成

    「.env」ファイルを作成しテスト用の値を用意します

    .env
    TEST_VALUE=local_env_test_value

    nuxt.config.jsに追加

    nuxt.config.jsの env に設定します。 これでNuxt.jsのコード内で process.env.testValue で使えるようになります。

    nuxt.config.js
    export default {
      ・・・
      env: {
        testValue: process.env.TEST_VALUE,
      },
      ・・・
    }

    もしもデフォルト値を設定したい場合は || で設定

    nuxt.config.js
    export default {
      ・・・
      env: {
        testValue: process.env.TEST_VALUE || 'default value',
      },
      ・・・
    }

    環境変数の値を使用する

    あとはコードでこのようにすればOK!

    console.log(process.env.testValue)
    // => "local_env_test_value"
    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。