Nuxtでprocess.env.NODE_ENV
を参照する際にハマりがちだったので挙動をまとめました。
なお、環境は以下のとおりです。
"dependencies": {
"cross-env": "7.0.0",
"nuxt": "2.11.0"
},
※この記事で記載しているファイルは内容を一部抜粋したものです。
デフォルトの挙動
まず、何の設定もせずにyarn dev
したときとyarn build && yarn start
したときの値を確認します。
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
<template>
<div />
</template>
<script>
export default {
mounted() {
console.log(process.env.NODE_ENV);
}
};
</script>
実行方法 | process.env.NODE_ENV |
---|---|
yarn dev | "development" |
yarn build && yarn start | "production" |
このようにデフォルトで値が入っていることがわかりました。次に、環境変数を指定した際の挙動を見ていきます。
環境変数を指定したとき
"scripts": {
"dev": "cross-env NODE_ENV=dev nuxt",
"build": "cross-env NODE_ENV=build nuxt build",
"start": "cross-env NODE_ENV=start nuxt start"
},
実行方法 | process.env.NODE_ENV |
---|---|
yarn dev | "development" |
yarn build && yarn start | "production" |
環境変数に指定した値が入ると思いきや、デフォルトの値が優先されてしまいました。これでは困るので、次にNODE_ENV
をnuxt.config.js
に指定したときの挙動を見てみます。
env を指定したとき
env: {
NODE_ENV: process.env.NODE_ENV
}
"scripts": {
"dev": "cross-env NODE_ENV=dev nuxt",
"build": "cross-env NODE_ENV=build nuxt build",
"start": "cross-env NODE_ENV=start nuxt start"
},
実行方法 | process.env.NODE_ENV |
---|---|
yarn dev | "dev" |
yarn build && yarn start | "build" |
今回はこのようにビルド時に埋め込んだ値が取得できることがわかりました。
まとめ
というわけで、process.env.NODE_ENV
の値を Nuxt で定義したコンポーネントから取得する際は、nuxt.config.js
のenv
プロパティにNODE_ENV
を指定したほうが間違いは起こりにくいかもしれません。
しかし、今回の記事では触れていませんが、例えば Nuxt を express で動かす際などは、process.env.NODE_ENV
の値をserver.js
などのファイルから参照する関係で、予想と違う形でprocess.env.NODE_ENV
の値が返ってくることがあるかもしれません。
あまりないケースかとは思いますが、そのようなことを考えると build 時とサーバー起動時に設定するNODE_ENV
の値は同じにしておいたほうが無難っぽいです。
追記
Nuxt のバージョン2.13.0
からruntimeConfig
のサポートが入りました。これにより、環境変数の設定がより簡潔に書けるようになるかもしれません。詳しくは以下のページをご確認ください。