Laravel集成VueJS报错：[Vue warn]: Cannot find element: #app

问题根源 #

你当前的情况是：仅admin/time页面存在#app元素，且你只计划在该页面加载app.js，但其他页面却出现Vue找不到#app的报错——这说明其他页面也加载了app.js，大概率是你的Blade判断逻辑写法有误，或者布局文件里有其他地方重复引入了app.js。

两种解决思路 #

思路1：确保app.js仅在目标页面加载 #

修正Blade模板的判断语法（你原代码漏了Blade语法必需的@符号），确保只有admin/time页面才引入app.js：

@if(Request::is('admin/time'))
    <script src="{{ asset('js/app.js') }}" async defer></script>
@endif

同时排查所有布局文件、子模板，确认没有在其他位置重复引入app.js。

思路2：让Vue实例仅在存在#app元素时初始化 #

如果app.js需要在多个页面加载（比如其他页面也可能用到Vue组件），直接修改app.js的初始化逻辑，先判断元素是否存在再创建Vue实例：

const appEl = document.getElementById('app');
if (appEl) {
    const app = new Vue({
        el: appEl
    });
}

这样即使其他页面加载了app.js，因为找不到#app元素，Vue就不会尝试初始化，自然不会触发报错。

内容的提问来源于stack exchange，提问作者abu abu