Laravel安装Vue.js后无法加载example-component问题求助

这个报错本质是代码执行到Vue.component时，全局的Vue对象为undefined，可能的原因和对应的解决方法如下：

• 你安装的是Vue 3.x版本，和现有Vue 2.x的语法不兼容
  当前npm默认安装的Vue主版本为3.x，而你提供的app.js写法是Vue 2.x的标准写法，Vue 3.x已经移除了全局Vue.component的API，所以会触发该报错。你可以先打开项目根目录的package.json文件查看vue依赖的版本号：
  • 如果版本号为3.x，你可以选择降级到Vue 2.x：执行npm uninstall vue && npm install vue@2.6.14，之后重新执行npm run dev编译即可。
  • 如果你要使用Vue 3.x，需要把app.js的写法替换为Vue 3的兼容写法：

    require('./bootstrap');
    import { createApp } from 'vue'
    import ExampleComponent from './components/ExampleComponent.vue'
    const app = createApp({})
    app.component('example-component', ExampleComponent)
    app.mount('#app')
    

• require('vue')的导出规则和当前配置不匹配
  部分webpack配置下require('vue')会直接返回Vue构造函数，不需要取.default属性，你可以尝试修改window.Vue的赋值代码为：

  window.Vue = require('vue');
  

  修改后重新编译测试是否恢复正常。
• 依赖安装不完整或编译过程出错
  你可以尝试清理现有依赖后重新安装、编译：
  1. 删除项目根目录的node_modules文件夹和package-lock.json/yarn.lock文件
  2. 执行npm install重新安装所有依赖
  3. 执行npm run dev重新编译前端资源
• Blade模板结构不符合要求
  注意两个要点：
  1. 所有Vue组件必须放在id="app"的容器内部，例如：

  <div id="app">
    <example-component></example-component>
  </div>
  

  2. 编译后的app.js引入位置要在DOM结构之后，通常放在body标签的末尾，确保Vue初始化时能找到对应的挂载节点。

内容的提问来源于stack exchange，提问作者Young L.