vue.js側でenvファイルを読み込む際の注意点（Laravel×Vue.js）

以前、Vue.jsでenvファイルを読み込めないかな〜と思って、試してみたらできました。

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

しかし、この方法を実際に使っていく上で、罠を見つけたので共有します。

FTPでデプロイする際は要注意！

どうやらlaravel-mixでコンパイルする際にenvファイルの情報を読み込んで、 app.js に出力されているようなんです。

つまり、開発環境でlaravel-mixでコンパイルした後に、そのままapp.jsを本番環境にFTPでアップロードしたら、本番環境にある.envを読まずに、開発環境のenvファイルの値を使用し続けてしまいます。

めちゃめちゃややこしいですねええええ。

本番環境にSSHで入ってコンパイルする場合は問題ない

なので、本番環境で npm run prod　でコンパイルする際は、本番環境のenvを使用するので問題はないです。

envファイルを書き換えたら、コンパイルしないと反映されない

コンパイル時にenvファイルの情報を読み込んでapp.jsに入れ込んでいるので、再コンパイルしないと反映されません。
なかなか通常とは違うやり方なので面倒ですね。

結論： Laravel側でenvを読み込んでフロントに渡すのが無難

Vue.jsでenvを直接読みにいく方法もあったのですが、
無難なのは、Laravelでenvを読み込んで、Vue.jsにpropsとして渡すことでした。
これであれば、普通の設定値と同じ扱いで問題なく使えます。