Vue3+Laravel8全局注册组件报Cannot read properties of undefined如何解决

问题原因 #

你的app.js中代码执行顺序错误：你在还没初始化app实例的时候就调用了app.component注册全局组件，此时app变量还未定义，所以抛出Cannot read properties of undefined (reading 'component')错误。另外Vue 3不需要window.Vue = require('vue').default的写法，这是Vue 2的旧用法，可以直接删除。

修复后的app.js代码 #

import { createApp } from 'vue';
import router from "./router";
import components from './components/UI'

// 先初始化app实例
const app = createApp({})

// 再循环注册全局组件
components.forEach(component => {
    app.component(component.name, component)
})

// 最后挂载实例
app.use(router)
   .mount("#app")

修改后重新打包运行即可正常注册全局my-button组件，直接在项目任意Vue文件中使用<my-button>标签即可调用该组件。

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