対処法① deferをつける
<script src="{{ asset('js/app.js') }}" defer></script>
deferとは?
defer
属性をつけると、呼び出し場所に関係なく
ページ読み込み完了のタイミングでそのJavaScriptファイルを読んでくれる
JavaScriptファイルが呼び出されるのはHTMLの読み込みが終わった後
つまりDOMContentLoaded
イベントの直前なので、
今回のようなCannot find element
エラーを回避できる
しかしdeferをつけることで他のJavaScriptライブラリと競合したりすることもしばしば...
そんな時は下記の対処法②がおすすめ
解決策② </body>の直前で読み込む
単純に、HTMLソースの読み込みが終わった最後の段階で呼び出せばOK
<script src="{{ asset('js/app.js') }}"></script>
</body>
Laravelで [Vue warn]: Cannot find element: #app エラーが
コンソールに出た場合の対処法メモ