Vue2とVue3では設定方法が異なります。この記事ではVue3に関する設定方法を。npm run serve mode=mockとして起動することで、.env.mockのファイルを読み込みます。開発環境の時はNODE_ENVがdevelopmentなので、.env.developmentが読み込まれます。
環境変数名はVUE_APP_で始まる必要があり、それ以外は無視されてしまう。
VUE_APP_HOGEFUGA=true |
process.env.VUE_APP_HOGEFUGAで参照可能。
.envは全てのケースにおいて読み込まれますが、優先順位があり、.env.developmentが先に読み込まれる。また、.env.localや.env.development.localのように末尾に.localのファイルがあれば、それが優先的に読み込まれる。.localは各個人の環境でのみ利用することを想定しているファイルで.gitignoreの対象となっている。
例えば、--mode=developmentで起動した場合、.env.development.local -> .env.development -> .env.local -> .env の順番に読み込みされて、同じ環境変数名がある場合は先勝ちである。
これらの処理はdotenvやdotenv-expandのモジュールがやってるのだと思うのですが、そんなコードは見つけられず、dotenv-flowにこのような処理があるけど、vue3からはリンクはされておらず。
どうやら自前で処理している様子。
vue-cliのcli-serviceのService.jsに処理がありました。dotenvを利用しており、環境変数DEBUG=trueをつけて実行すると、dotenvのデバッグログが有効になって、そのあたりのログが出力されます。