Vue CLIプロジェクトで環境変数を使う

Vue CLIプロジェクトでは、dotenv等のパッケージを追加しなくても環境変数が使えるのですね。

ちゃんと公式にも載っていました。

備忘録として、設定内容を残します。

環境変数を設定するファイルを作成

今回は、.env.localを作成し、firebaseで使う情報を記載しました。

1. プロジェクトルートに.env.localファイルを作成します。
2. 環境変数を定義
   

変数名は接頭辞VUE_APP_を付ける必要があるので注意

# firebaseConfig
VUE_APP_API_KEY = '文字列'
VUE_APP_AUTH_DOMAIN = '文字列'
VUE_APP_PROJECT_ID = '文字列'
VUE_APP_STORAGE_BUCKET = '文字列'
VUE_APP_MESSAGING_SENDER_ID = '文字列'
VUE_APP_APP_ID = '文字列'
VUE_APP_MEASUREMENT_ID = '文字列'

アプリケーションから呼び出し

アプリケーションの該当コードで、環境変数を参照するように変更します。
process.env.変数名で呼び出せます。

    var firebaseConfig = {
      apiKey: process.env.VUE_APP_API_KEY,
      authDomain: process.env.VUE_APP_AUTH_DOMAIN,
      projectId: process.env.VUE_APP_PROJECT_ID,
      storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
      messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
      appId: process.env.VUE_APP_APP_ID,
      measurementId: process.env.VUE_APP_MEASUREMENT_ID,
    };

注意

ローカルでbuildしたファイルをサーバーにアップしている場合、.env.localに記載した内容は、buildしたファイルに書き出されてしまいます。そのため、.env.localではなく、.env.development.localファイルを使う必要があります。
詳細は以下に記載しています。