こんにちは！kossyです！
さて、今回はVue.jsで環境変数を扱う時に、VUE_APPを付与し忘れて10分ほどハマってしまったので、
備忘録としてブログに残してみたいと思います。
環境
vue/cli 4.5.9
vue 3.0.4
node 14.15.0
npm 6.14.8
事象
.envファイルに以下の二つの環境変数を定義しました。
VUE_APP_API_BASE=https://api.themoviedb.org/3
API_KEY=MASKED_API_KEY
そしてaxiosを使ってクエリストリングにAPI_KEYを混ぜてリクエストを送るタイプのAPIを叩くテストをしていました。
axios.get(`/trending/all/week?api_key=${process.env.API_KEY}&language=en-us`)
ここで、認証に失敗して401が返ってきていたので、
console.log(process.env.API_KEY)
console.logでAPI_KEYの値がきちんと取得できているかを検証しました。すると、
undefinedが返っています、、、
ここで、「Vue 環境変数」みたいなググり方で以下の記事を発見
VUE_APPの付与忘れにここで気がつきます。(ちゃんと環境変数使う前にドキュメント読めっていう話、、、)
.envファイルの方を以下のように編集
VUE_APP_API_BASE=https://api.themoviedb.org/3 VUE_APP_API_KEY=MASKED_API_KEY // VUE_APPを忘れないで！！
そして
console.log(process.env.VUE_APP_API_KEY)
無事環境変数から値を取得することに成功しました。(添付画像の文字列はAPI_KEYっぽいものにしています)
勉強になりました。
大いに参考にさせていただいた記事
この場を借りて御礼を申し上げます。
kic-yuuki.hatenablog.com
qiita.com
