Nuxt.jsのプロジェクトを作成する際、開発環境や本番環境毎に環境変数を設定したい場合があります。
この環境変数を設定する方法として、 cross-envというパッケージが公式でも紹介されている ため、利用している方も多いかと思います。
しかし、cross-envで設定した環境変数を nuxt.config.js で使用できなかったため、解決方法をまとめておきます。
cross-envの設定方法などは、下記の記事などがわかりやすかったため、まだ導入していない方は参考にしてください。
[参考] Nuxtでcross-envを使い環境ごとに環境変数を分ける
環境変数用のファイルを作成
今回は例として、開発環境(development)と本番環境(production)の２つの環境を用意するものとします。
まずは、環境変数用のファイルを作成します。
config というディレクトリを用意し、その中に作成しました。
config/env.development.js
module.exports = {
API_BASE_URL: 'http://localhost:3003/'
};
config/env.production.js
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に環境変数を設定してみます。
nuxt.config.js
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しているので、ここから直接環境変数を読み込むことができます。
nuxt.config.js
const envSet = require(`./config/env.${process.env.NODE_ENV || 'development'}.js`);
module.exports = {
...
axios: {
baseURL: envSet.API_BASE_URL // 環境変数を読み込み
},
...
env: envSet
...
}
以上！