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
都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。