Nuxt.jsで環境ごとにdotenvで.envファイルの読み込みを切り替える

なんかパッと解決できなかったので備忘録。

Nuxt.jsではcreate-nuxt-appをするときに「dotenv使うかー？」的なこと聞かれてインストールする方も多いと思います。

初めは一つの.envファイルに下記のように一つのファイルに設定してコメントアウトして切り替えていました。

# 本番用
BASE_URL = 'honban.com'
API_BASE_URL = 'https://honban/endpoint/'

# 開発用
# BASE_URL = 'kaihatsu.com'
# API_BASE_URL = 'https://kaihatsu/endpoint/'

ただ、やっぱだるいのでenvファイルを分けたくなり、結局「.env.prod」と「.env.dev」の二つのファイルを作成し、環境変数で読み込めるようにしました。

使うモジュール的には「dotenv」と「cross-env」で、package.jsonにまず下記のように環境変数を指定します。

"scripts": {
    "dev": "cross-env NODE_ENV=\"dev\" nuxt-ts",
  },

これで「yarn dev」したときに環境変数には「dev」が入ります。

そのため、nuxt.config.jsで下記のように読み込ませます。

require('dotenv').config();

export default {
  mode: 'universal',
 // 省略
  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/vuetify',
    ['@nuxtjs/dotenv', { filename: `.env.${process.env.NODE_ENV}` }]
  ]
}

dotenvモジュールのホムペ見たら書いてありましたねオプション笑
github.com

やっぱドキュメントが一番！