Nuxt開発の小ネタです。環境変数を開発環境/本番環境で切り分けたいときにどうすればよいか、わからなかったのでメモしておきます。
環境
- nuxt@2.5.1
- vue@2.6.10
- @nuxtjs/dotenv@1.3.0
dotenvモジュール
nuxtのdotenvモジュールを使います。
インストールは下記コマンドで行ってください。
$ npm install --save @nuxtjs/dotenv # yarn add @nuxtjs/dotenv
.envファイル作成
それでは環境変数を設定するファイルを作成していきます。
configディレクトリを作成し、 .env.dev
と .env.prod
のように環境ごとにファイルを作成します。
config ├── .env.dev └── .env.prod
それぞれのファイルに環境変数を記載します。
config/.env.dev
FOO=0 BAR=hoge
nuxt側の設定
あとはconfigファイルを設定するだけです。
環境変数の NODE_ENV
で読み込みファイルを変えるように設定します。
nuxt.config.js
modules: [ [ '@nuxtjs/dotenv', { filename: process.env.NODE_ENV !== 'production' ? "./config/.env.dev" : "./config/.env.prod" } ] ],
簡単ですね。
実行
あとは起動時に環境を切り分けるだけです。 ローカルで検証する場合が次のような感じですね。
$ npx nuxt # => /config/.env.dev を読み込んで起動 $ npx nuxt start # => /config/.env.prod を読み込んで起動
まとめ
Nuxt開発時に環境変数を開発環境/本番環境で切り分ける方法を紹介しました。 必要になる場面は多いと思うのですが、良い方法がパッと出てこなかったのでまとめてみました。 もっと良い方法があれば是非教えてください!