いつの間にかNuxt.jsで実行時環境変数が使えるようになっていた件

概要

Nuxt.jsで環境変数を使う際、実行環境の環境変数がセットできるようになっていました。
確か、2.13 以前のversionではBuild時の変数がStringとして置換されるような仕様だったので環境変数はBuild時に確定させる必要がありました。
Build環境はCI環境で別環境になっているような構成は一般的だと思うので、Build用に環境変数用のファイルを用意してdotEnvで頑張る的な運用が必要だったのでとってもハッピーになりました。

使い方

公式ドキュメントはコチラ

nuxt.config に runtimeConfig をセットする

２つのconfigファイルがあります
・ CSR時・SSR時どちらでも利用したいものは publicRuntimeConfig
・ SSR時のサーバーサイド限定で利用したいものは privateRuntimeConfig
に以下のように実行時の環境変数から値をセットできます。

export default {
  publicRuntimeConfig: {
    HOGE : process.env.HOGE,
    axios: {
      browserBaseURL:
        process.env.BROWSER_BASE_URL
    }
  },
  privateRuntimeConfig: {
    FUGA : process.env.FUGA,
    axios: {
      baseURL:
        process.env.API_BASE_URL 
    }
  }
}

呼び出し方

SSR時

asyncData($config) {
  console.log($config.FUGA) // SSRなのでprivateで宣言したほうも呼べる
  console.log($config.HOGE)
}

CSR時

mounted() {
  console.log(this.$config.HOGE)  // CSRなのでpublicで宣言した方しか呼べない
}

.env の扱い

実行環境の変数が使えるようになり、各環境ごとの env ファイルが必要なくなったため、今まで @nuxtjs/dotenv をインストールして実現していたものが必要なくなりました。
そうなると、ローカル環境などのデフォルトの環境変数の扱いがめんどくなるので、デフォルトの環境変数を .env ファイルを作成しその中に置いておけば適応されるように変更されました。
https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config

そのため、プロジェクトルートに .env ファイルを作成し、以下のようなファイルを置いておけばデフォルトの変数がセットされるようになります。

.env

HOGE=hogehoge
FUGA=fugafuga
API_BASE_URL=https://hogehoge
BROWSER_BASE_URL=https://hogehoge

注意点

実行環境の変数が使えるようになったが、Build時に値を内容を確定させる必要があるものに関しては、注意が必要です。
例えばNuxt.jsではheadの内容を nuxt.config のheadプロパティを利用してセットすることができますが、ここの内容はおそらくBuild時に確定するらしく RuntimeConfigに head プロパティを追加してみても上書きされませんでした。
例にあるようにaxiosではnuxtの変数を上書きできたので、同じような感じで行けるかなと思っていたんですが @nuxt/axios 側に機能として持っているんでしょうか
分かる人いたら教えて下さい。