Laravelの.envで指定した環境変数がVueファイルに反映されない

Question

LaravelのBladeファイルをベースとして、Vueで書いた方が効率が良さそうなページに関してのみ.vueファイルを作成しコンポーネント化するといった感じで現在進めているのですが、

Bladeファイルではenvから変数を読み込めるのですが、取り込んだComponentファイルでは環境変数が読み込まれない状況です。

どなたか知見をお貸しいただければ幸いです。

<script>
export default {
methods: {
    test: function() {
      console.log(process.env("AWS_URL"));
    },
}
}
</script>

Answer 1

このエラーが出てくるということは、processがundefinedということになります。

そもそも、環境変数はサーバサイドにあって、ブラウザ環境には出てきませんので、ブラウザでprocess.envにアクセスすることはできません。

Node.jsの側に手を入れて、「process.env("AWS_URL")をサーバサイドで置き換える」ような処理をする必要があります。

（なお、JavaScriptに埋め込んでしまうという性質上、シークレットキーをやり取りするには適しません）

Comments

[mattun_evo]

ありがとうございました！
Vueファイルで呼び出せるみたいな記事があったので鵜呑みにしてしまいました。
開発用と本番用で、envファイルを変更すればアプリ全体に反映されるみたいなグローバルな変数的な使い方をしたかった感じです。
bladeで読み込んで、propsとして受け渡せばとりあえず実装はできますが、他ファイルでも使うときの効率化を視野に入れて悩んでみたいと思いますー。
ありがとうございました！

Answer 2

.envファイル内を

VUE_APP_AWS_URL=""

みたいにVUE_APP_をプリフィックスとしてつけてないとか？

参考
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
https://qiita.com/h-reader/items/9e2f8dbc3b9eaec4f5ee