Nuxt.jsのプロジェクトを作成する際、開発環境や本番環境毎に環境変数を設定したい場合があります。

この環境変数を設定する方法として、 cross-envというパッケージが公式でも紹介されている ため、利用している方も多いかと思います。

しかし、cross-envで設定した環境変数を nuxt.config.js で使用できなかったため、解決方法をまとめておきます。

cross-envの設定方法などは、下記の記事などがわかりやすかったため、まだ導入していない方は参考にしてください。
[参考] Nuxtでcross-envを使い環境ごとに環境変数を分ける

環境変数用のファイルを作成

今回は例として、開発環境(development)と本番環境(production)の２つの環境を用意するものとします。
まずは、環境変数用のファイルを作成します。
config というディレクトリを用意し、その中に作成しました。

module.exports = {
  API_BASE_URL: 'http://localhost:3003/'
};

module.exports = {
  API_BASE_URL: 'https://api.hogehoge/'
};

nuxt.config.js 内で環境変数を設定

環境変数を設定します。

この設定を行うことで、 コード内では process.env.API_BASE_URL のように呼び出すことができますが、 nuxt.config.js 内ではまだ呼び出すための設定が完了していないため process.env.API_BASE_URL を使用することはできません。

例として、axiosのbaseURLに環境変数を設定してみます。

const envSet = require(`./config/env.${process.env.NODE_ENV || 'development'}.js`);
module.exports = {

  ...

  axios: {
    baseURL: process.env.API_BASE_URL  // 環境変数を正しく読み取れない
  },

  ...

  env: envSet

  ...

}

nuxt.config.js 内での環境変数の使用方法

envSet をrequireしているので、ここから直接環境変数を読み込むことができます。

const envSet = require(`./config/env.${process.env.NODE_ENV || 'development'}.js`);
module.exports = {

  ...

  axios: {
    baseURL: envSet.API_BASE_URL  // 環境変数を読み込み
  },

  ...

  env: envSet

  ...

}

以上！