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"