Laravel8搭配Vue3出现Cannot read properties of undefined (reading 'component')报错如何解决

该报错是因为你使用了Vue 2的初始化语法编写Vue 3的逻辑，Vue 3移除了原有的全局Vue构造函数，所以require('vue').default无法拿到带有component方法的全局Vue对象，才会抛出属性读取失败的错误。

1. 修改app.js代码 #

替换原有Vue 2风格的初始化代码，改为Vue 3支持的写法：

// 导入Vue3提供的创建应用方法
const { createApp } = require('vue');
// 导入自定义组件
const HelloComponent = require('./hello.vue').default;

// 创建应用实例
const app = createApp({});
// 注册全局组件
app.component('hello', HelloComponent);
// 挂载到页面节点
app.mount('#app');

如果你更偏好ESModule的导入写法，也可以用如下代码：

import { createApp } from 'vue'
import Hello from './hello.vue'

createApp({})
  .component('hello', Hello)
  .mount('#app')

2. 检查Laravel Mix配置 #

打开项目根目录的webpack.mix.js，确保已经启用Vue3编译支持：

mix.js('resources/js/app.js', 'public/js')
  // 必须添加这行，开启Vue3单文件组件的编译能力
  .vue()
  .postCss('resources/css/app.css', 'public/css', []);

3. 重新编译资源 #

执行如下命令重新安装依赖并编译前端资源：

npm install
npm run dev

编译完成后刷新页面即可正常渲染组件。

Vue 3对全局API做了较大调整，原有Vue 2的new Vue()、Vue.component、Vue.use等全局调用方式全部废弃，所有全局配置都需要在createApp返回的应用实例上调用对应方法完成。

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