laravel 5.4 + vue 2.x で hot reload
いつのまにやら、package.jsonのscriptsに hot ってのがあるので、
「npm run hot すればホットリロードできるやん
npm run watch 使って、いじるたびにブラウザリロードなんてせんでええんやん」
って喜び勇んだらうまく行きませんでした。
なんか惜しいところまで書いてあるんだけどこれだ！って解決がバシっと書いてあるところがあんまりない気がする
あれこれやってたらうまくいったので解決法をば。
そもそもnpm run hot って？
vue-cli でいうところの npm run dev とほとんど一緒みたいです。
portは8080決め打ち、 localhost:8080/ 直下はプロジェクトの public/ を読み込むみたいです。
逆にいうとこやつはphpをよしなにやってくれません。
また、laravel はデフォルトで index.php しか publicの下においてありませんので、
http://localhost:8080/ とかにアクセスしてもただ寂しく下記のような表示になるだけです。
Cannot GET /
一応ここで、index.htmlとかをpublic以下においてやって、laravel-mixでvueのコンポーネントをrequireしているjsをコンパイルしたものを読み込んでやれば、ホットリロードが有効になります。
PHPのBladeで書き換えている箇所は見ることができませんが。
laravelで使える mix() を使おう
bladeの中で、下記のように、ｍix()の中にhotリロードさせたいコンパイル後のjsファイルを指定すると、php artisan serve中はlocalhost:8080 からのパスに書き換えてくれます。
（apache なんかから呼び出す時はそのまま本来のパスになるみたい。）
<script src="{{mix('js/vue.js')}}"></script>
なお、当然のことながら、mix()を使うようになって以降は、
php artisan serve するときは、 npm run hotもしておかないと
mixで呼び出している箇所のファイルが not foundになってしまうので気をつけてください。
これで、laravelでvueするとき hot reload できるようになりました。
そもそもLaravelでVueやりたいときに見るチュートリアルはこちら
Laravel 5.4 + Vue 2.1 でSPAアプリケーション作成チュートリアル