Vue.jsで.envを使って環境変数を読み込みたい

Question

前提・実現したいこと

vue.jsの.envが試してみたく、以下の手順に沿って実施しました。
https://tech.mof-mof.co.jp/blog/vue-cli3-env/

VUE_APPの接頭辞をつけたVUE_APP_SECRETとVUE_APP_FOOについては、それぞれundefinedではなくsecretとfooが表示されるはずなのですが、そうなりません。

発生している問題・エラーメッセージ

developer toolで確認すると、undefinedと表示されてしまいます。

該当のソースコード（実際に試した手順）

プロジェクトの作成

$ mkdir env-vuejs-test
$ cd env-vuejs-test/
$ vue create todo-vue-cli
$ cd todo-vue-cli/
$ touch src/.env

main.jsと.envの修正

src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

console.log(process.env.FOO)
console.log(process.env.SECRET)
console.log(process.env.VUE_APP_SECRET)
console.log(process.env.VUE_APP_FOO)

new Vue({
  render: h => h(App),
}).$mount('#app')

src/.env

FOO=foo
SECRET=secret
VUE_APP_FOO=vue_app_foo
VUE_APP_SECRET=vue_app_secret

実行

$ yarn serve

localhost:8000にアクセスしまして、developer toolを確認しました。

補足情報（FW/ツールのバージョンなど）

@vue/cli 4.3.1
Mac OS 10.15.4
Chrome 81.0.4044.138
VS Code 1.45.0

Answer 1

Environment Variables

You can specify env variables by placing the following files in your project root:

ドキュメントに記載の通り.envはプロジェクトルートに配置してください。

Comments

[pinetail63]

ご回答いただきありがとうございます！
解決できました。