初めに

本記事は、フロントエンドに Vue.js + Vue Router + Vuex とサーバーサイドに Laravel を使用したSPAの開発方法を学べる教材であるVue + Vue Router + Vuex + Laravelで写真共有アプリを作ろうの環境構築において発生したエラーとその解決方法について述べたものです。

環境構築

OS：Mac
構築方法：教材にそってDockerを使用

npm run watch にて画面が表示されない

私の場合npm run watchをしてもhttp://localhost:3000/になにも表示されなかったのは、バックエンド(Laravel）にて事前にlocalhostを立てていない事が原因でした。そのため別ターミナルを起動してコンテナ上で

php artisan serve --host 0.0.0.0 --port 8081

とした上でnpm run watchを行いましょう。

またこの教材はLaravel6までしか対応が保証されていないため、Laravel7 || Laravel8の場合にもエラーが発生する可能性があります。そのため、Laravelのプロジェクトを作成する際に教材通りに

 composer create-project --prefer-dist laravel/laravel .

とするのではなく

composer create-project --prefer-dist laravel/laravel .6.*

とバージョンを指定することで、エラーをなくす事ができるかもしれません。

最後に

二つとも超初歩的なことでしたが、環境構築にまだ慣れていないが、Laravelとvueを使ったアプリケーションを作りたい人自分のような人に向けて自分の体験を共有しました。
また、Laravelとvueを使ったSPAの開発の教材として
【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう！
こちらの教材も素晴らしい教材ですのでぜひ