Nuxt.jsで環境変数を使ってみます。
手順はとてもシンプルで以下の2つをやればOKです!
- 1.
.envに値を設定 - 2.
nuxt.config.jsで利用する値の設定
検証した環境
| 1 | nuxt | 2.14.3 |
.envを作成
「.env」ファイルを作成しテスト用の値を用意します
.env
TEST_VALUE=local_env_test_valuenuxt.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"