Vue-cli3の.envファイルで環境変数が使えない時の対処法

リファレンスやサイトにはプロジェクトのルートディレクトリに .envファイルを置いて VUE_APPというプレフィックスをつけて環境変数を定義する。
みたいな事が書いてあるのですが、僕の環境ではそれが出来ずに困ったので同じ人がいるのではないかと思い対処法を共有したいと思います。

まず原因としては vue init webpack プロジェクトを作成する場所 でvue-cli3プロジェクトを作成すると起きる問題らしいです。

根本的な原因を探しに行ける程スキルを持ってないのが悲しい所です（泣

別の方法でプロジェクトを作り直せるならそれをするのが一番楽です。

まぁ早速対処法ですが、

ズバリ config/dev.env.js に書いてしまいましょう。

config/dev.env.jsを見てみると

NODE_ENV: '"development"'

と書いてありますね！

これに続いて

NODE_ENV: '"development"',
BASE_API: '"APIのエンドポイント"'

と記述してあげるとコード側で

console.log(process.env.BASE_API)

みたいな感じで書けます。(VUE_APPのプレフィックスは不必要)

もちろん

test環境なら test.env.js
本番環境なら prod.env.js

に書いてくださいね！

.envが使える方法や間違い等がありましたらコメントお願い致します。