Vueで.envを使った環境変数が使えない時の対処法
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_ENVとBASE_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に読み込ませることに成功しました。
以上になります。
Discussion