38
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Nuxt.jsでprocess.env.NODE_ENVを参照する際の挙動についてまとめてみた

Last updated at Posted at 2020-03-05

Nuxtでprocess.env.NODE_ENVを参照する際にハマりがちだったので挙動をまとめました。

なお、環境は以下のとおりです。

package.json
  "dependencies": {
    "cross-env": "7.0.0",
    "nuxt": "2.11.0"
  },

※この記事で記載しているファイルは内容を一部抜粋したものです。

デフォルトの挙動

まず、何の設定もせずにyarn devしたときとyarn build && yarn startしたときの値を確認します。

package.json
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  },
pages/index.vue
<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"

このようにデフォルトで値が入っていることがわかりました。次に、環境変数を指定した際の挙動を見ていきます。

環境変数を指定したとき

package.json
  "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_ENVnuxt.config.jsに指定したときの挙動を見てみます。

env を指定したとき

nuxt.config.js
  env: {
    NODE_ENV: process.env.NODE_ENV
  }
package.json
  "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.jsenvプロパティにNODE_ENVを指定したほうが間違いは起こりにくいかもしれません。

しかし、今回の記事では触れていませんが、例えば Nuxt を express で動かす際などは、process.env.NODE_ENVの値をserver.jsなどのファイルから参照する関係で、予想と違う形でprocess.env.NODE_ENVの値が返ってくることがあるかもしれません。

あまりないケースかとは思いますが、そのようなことを考えると build 時とサーバー起動時に設定するNODE_ENVの値は同じにしておいたほうが無難っぽいです。

追記

Nuxt のバージョン2.13.0からruntimeConfigのサポートが入りました。これにより、環境変数の設定がより簡潔に書けるようになるかもしれません。詳しくは以下のページをご確認ください。

38
21
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?