vue側でlaravelのenvファイルの値を使用する方法

Vueのファイルの方で.envの値を使いたいことがあったので調べて実装してみました。

手順1. .envにMIX_という接頭辞を付けて環境設定を設定する

例えば APP_ENVの値をvue側で使いたい場合、 MIX_APP_ENV という風に MIX」 というprefixをつけて.envに登録します。

APP_ENV=local
MIX_APP_ENV="${APP_ENV}"

手順2. ローカルサーバーを立ち上げなおし、再コンパイルする

僕はこれをしていなかったので、なかなか値が反映されずしばらく困っていました（笑）

php artisan serve
npm run watch

手順3. vue側でMIX_のprefixがついた方の環境変数をprosess.envを用いて取得する

console.log(process.env.MIX_APP_ENV)

以上で、vue側で.envの値を取得できました！

vue componentの中でもapp.jsの中でも値が取得できます。