Laravel 8 集成 Vue 3 报Failed to resolve component: app错误求助

• createApp参数错误：你当前给createApp传入的是{App}，相当于将根组件配置设置为一个包含App属性的对象，既没有将App.vue作为根组件直接使用，也没有完成组件注册
• 未注册对应组件：你在blade模板中使用了<app>标签，但没有全局注册名为app的Vue组件，导致Vue无法识别该标签

你提供的webpack.mix.js和App.vue配置没有问题，无需修改，选以下任意一种方案修改即可解决报错：

方案一：直接挂载App为根组件（更常用） #

这种方式不需要在blade中写<app>标签，直接将App.vue作为整个挂载区域的根组件渲染：

1. 修改app.js代码：

require('./bootstrap');

import { createApp } from 'vue';
import App from './App.vue';

// 直接将App作为参数传入createApp
const app = createApp(App);
app.mount("#app");

2. 修改welcome.blade.php中#app节点内容，删除内部的<app>标签：

<div id="app">
</div>

方案二：保留标签，全局注册组件 #

如果你需要在blade模板中保留<app>标签的写法，先全局注册对应组件即可，仅需修改app.js代码：

require('./bootstrap');

import { createApp } from 'vue';
import App from './App.vue';

// 创建空根实例
const app = createApp({});
// 全局注册名为app的组件，对应引入的App.vue
app.component('app', App);
app.mount("#app");

修改完成后重新执行npm run dev编译前端资源，刷新页面即可。

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