【Nuxt2】環境ごとに設定を切り替える

はじめに

n番煎じかつNuxt2での環境変数の書き方です．

.envファイルの作成

.envファイルを作成し，環境変数を記入する．Nuxt2では自動的にgitignoreになる．以下例

.env

# ここはコメント
API_URL=http://example.com
API_KEY=abcdef

nuxt.config.jsに環境変数を定義

nuxt.config.jsを編集し，page, layout, componentなどから参照できるようにする．
nuxtに元から入っているruntimeConfigを用いる．

nuxt.config.js

export default {
  // 省略
  publicRuntimeConfig: {
    apiURL: process.env.API_URL
  },
  privateRuntimeConfig: {
    apiKey: process.env.API_KEY
  }
}

publicとprivateの違い

publicはフロントエンドに公開してもいい環境変数．つまりSPAモードでもSSRでもSSGでも使える．
対してprivateはサーバサイドのみで使える．SSRやSSGモードで使う感じ．

各vueファイルで使う

runtimeConfigで設定された環境変数は，nuxt contextの$configプロパティに登録される．
分割代入などを用いていい感じに使う．以下例

example.vue

import axios from 'axios'
export default {
  async asyncData({ $config }) {
    axios.get($config.apiUrl + '/user', res => {
      // ...
    })
  }

参考文献

dotenvはもう古い！最新Nuxtの環境変数管理方法
Nuxt.jsのRuntimeConfigを使ってみる