Laravel5.4 + Vue2 npm run dev error

環境:cloud9上にPHP7、laravel5.4をインストール。laravel内に設置したvueファイルの表示に関して。

 

Vueのコンポーネントが表示されない・vueファイルの編集が反映されない

→   読み込むファイルに/public/js/app.jsを設置しているか確認

→ body内に<div id="app">を配置しているか確認

→ npm run dev でjsやcssファイルをコンパイルした時エラーが発生していないか確認

→ .vueファイルにエラーがあるとエラーの無い別のvueファイルも表示されなくなる

vueファイル内にlaravelのdirectiveは混ぜられない(コンパイル時エラーが発生する)

→ chromeの場合、ブラウザキャッシュが残ってて変更が反映されない場合がある。

       (ブラウザの更新ボタンを右クリック→「キャッシュの消去とハード再読み込み」を選択)

 

 vueで作成したファイル内にlaravelのmiddlewareやproviderを通したデータを挿入したい場合、例えば…

 

laravel側

Route::get('/user', function(){
  return Auth::user();
})->middleware('auth');

vue側

const app = new Vue({
  el: '#app',
  store,
  router: router,
  created() {
    axios.get('/user').then(response => {

      console.log(response);  

    })

  }
});

vueインスタンス生成時(created)にaxios経由でサーバーにリクエストを送り、laravel側で加工したデータを受け取る。

 

 

コンパイルエラーか反映の問題なのか判別するためにexample.vueは常時表示されるようにし、exampleの編集でエラー要因を確認するとよい。

 

参考:

Building Realtime Chat with Laravel 5.4 and VueJS: Part 3 (Laravel Backend) - YouTube


youtu.be