Laravel 5.4 + VueJS Hot Reloadについて

Laravel5.4から、webpack-dev-serverによるhot reloadが使えます。

How to

まずは、artisanコマンドでPHPが動くサーバーを立ち上げます。

$ php artisan serve

# http://localhost:8000/

次に、npm scriptでwebpack-dev-serverを立ち上げます

$ npm run hot

# http://localhost:8080/

index.blade.phpに、webpack-dev-serverがコンパイルしたapp.jsを読み込ませるようにします。

index.blade.php

...

    <script src="http://localhost:8080/js/app.js"></script>
    </body>
</html>

これだと、deployした時に困るので、mixを使います。

index.blade.php

...

    <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

これでリロードしなくても、VueJSの更新を終えます。

参考