💨

Vueで.envを使った環境変数が使えない時の対処法

1 min read

TL;DR

.env内の変数名にVUE_APP_をプレフィックスとして付けてみてください。
また、npm run serve等で開発されている方は一度serverを再起動しないと読み込まれない様です。
以下が例です。

VUE_APP_MY_VALUE=1
VUE_APP_MY_STRING='zenn is awesome!'

起こっていたこと

公式によると、Vue.jsには.envをプロジェクトルートにおくことで自動で読み込んでくれ、そこの値を読んでコンポーネント等で使用することができるそうです。
ですが、私の環境下では全く読んでくれませんでした。
公式ドキュメントより引用したやり方はこうです。

API_URL="example.com/api/v1"

としておいて、

<templete>
	
	<h1>{{ process.env.API_URL }}</h1>

</templete>

こうするだけで読んでくれるというのです。標準搭載したフレームワークは他にもありますが、普通はその言語のdotenv系のライブラリを入れて読み込ませると思うので、これはすごく簡単ですね。

なので僕もフロントから叩くAPIのURLをウキウキで.envに書き、テストしようと思いました。
すると。。。?
上記のvueファイルから書き出されたhtmlがこうです。

<templete>
	
	<h1></h1>

</templete>

なにも書いてねえ!!!
console.log()でも確認しましたがそもそもprocess.envにはNODE_ENVBASE_URLの値しか入ってないじゃないか。。。
(下はそのprocess.envの中身です。同じ悩みの方が検索で引っかかります様に。。。)

 {NODE_ENV: "development", BASE_URL: ""}

値が入っていかない。。。私はまずBASE_URLに値を入れようとがんばりました。ですがもちろん入らず。。

そしていろいろ調べていく中で、、とあるstack overflowの記事で、こんなのを見つけました

you need to add VUE_APP_ prefix to your variables.

お?先頭に付けたら読み込まれるのか?
ということで付けてみましょう。

VUE_APP_API_URL='example.com/api/v1'

そして、公式にあるようにサーバを再起動してみると、、

{NODE_ENV: "development", VUE_APP_API_URL: "example.com/api/v1", BASE_URL: ""}

できた!!プレフィックスとしてつけたのに変数名にVUE_APPがついてるのが少し気持ち悪いですが、、、
とりあえず、.envから環境変数をvueに読み込ませることに成功しました。

以上になります。

参考

stack overflow
vue公式リファレンス