【保存版】laravel + vue.jsが動かないときのチェックポイント

パン田@現役エンジニア
きょうはlaravel + vue.jsが動かない時のチェックポイントを教えるよ!

vue.jsの入門者、初心者の人が始めてみたらvue.jsが動かない事がよくあります。

今回はそのチェックポイントをすべて教えます。
この記事をすべてチェックすれば必ずあなたのvue.jsは動きます!

※ぼくはlaravel + vue.jsで始めたから、そのへんも。

vue.jsが動かない!チェックポイントまとめ

どれが原因か分からないと思うので、すべて順番にチェックしてくださいね!

node.jsはインストールされてる?

node -vでバージョンは表示されますか?

表示されなければnode.jsをインストールしましょう

 

npmはインストールされてる?

npm -vでバージョンは表示されますか?
もしされないならインストールしましょう

まぁ、node.jsをインストールすると勝手にインストールされるんですけど。

package.jsにvueは入ってる?

laravelのプロジェクトルートにあるpackage.jsonにvueは入ってる?

laravelは5.4か5.3くらいから標準で入ってるらしいです。

npm installした?

laravelのルートディレクトリで↓を実行します。

npm install

npm installするとpackage.jsonに書かれたパッケージがインストールされます。
あと古いやつをアップデートしてくれるぽい?

ぼくが詰まってたときはこれをやって解決しました。

 

npm installしてエラーでたらnpm audit fixした?

なんかパッケージに致命的なバグがあるとエラーが出たりする。vue.jsが動かないのとは直接関係がないと思うけど、やっとくべし

僕のときはaxios1.8.0が致命的なバグがあったのがひっかかってた。

laravel mix(タスクランナー)は動かした?

ルートディレクトリで↓のどっちかを実行してくださいね。

npm run dev

npm run watch

laravel mixについてざっくり説明すると

  • resource/jsディレクトリ
  • resource/cssディレクトリ

のファイルをコンパイルして、publicなディレクトリに生成したファイルを設置してくれます。

minifyとかもやってくれます。

public/js/app.jsはある?

npm run devでエラーしてなければここにapp.jsファイルができあがる。

ちなみにファイル名はlaravelプロジェクトルートディレクトリのwebpack.mix.jsに定義されているよ。

app.jsにはちゃんとnew Vueとか require(‘vue’)とか書いてある?

resource/js/app.jsはこんな感じになってる?

requireされてたり、new Vue(…)になってる?

viewファイル(blade)にcsrf_token入ってる?

なんか必要らしいです。

headタグの中にある必要があります。

 

viewファイルにid=”app”は書いてある?

bladeファイルにid=”app”は入ってる?ちなみに書くならdivタグがいいと思うよ。

 

bodyタグの終わり直前で app.jsを読み込んでる?

headタグではダメ。 bodyタグの閉じタグの直前に書くこと。

ちなみにmix(‘js/app.js’)でも asset(‘js/app.js’)でもどっちでもいいよ。

とまぁこんな感じです。

きっと動いたはず。

最後にフォローを!

役に立ったらフォローしてもらえると嬉しいな。

あと、エンジニアの年収を上げる方法やフリーの営業法をツイートしてるんでフォローしてくださいっ!!


フォローは↓からですよ!