vuecliでの環境変数の利用方法

ここに全部書いてるんだけど、知らずにハマったのでメモ。
Modes and Environment Variables | Vue CLI

Mode

環境ごとの処理を分けれるように、modeという概念がある。
defaultは、development,、test、production。

ちなみに、vue-cli-service build 時は、productionが自動でセットされる。
 

Environment

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

という感じに環境変数を書いていく。
アプリで利用するために VUE_APP_ というprefixをつける必要がある。これを理解していなくてハマってしまった。

あとは、secret keyとか書くなよということが一応書いている。

WARNING

Do not store any secrets (such as private API keys) in your app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

一応、このprefixを利用している理由としては、ついうっかり他の環境変数もjsにbundleされないようにするためのよう。