Laravel项目Vue组件不显示且控制台无报错如何解决？

优先级从高到低依次排查： #

• 1. 修正拼写错误
     你提供的组件文件标注名称为FollowButon.vue（缺少字母t），但app.js中引入的是./components/FollowButton.vue，文件名不一致会导致组件无法被正确加载，先确认组件文件名与引入路径完全匹配。
• 2. 检查Vue挂载容器是否存在
     你当前的Blade模板没有外层包裹id="app"的元素，Vue实例配置的挂载点是#app，必须保证layouts/app.blade.php中所有页面内容都被包裹在对应容器内：

  <body>
    <div id="app">
      <!-- 导航栏、@yield('content')等所有页面内容都要放在这里 -->
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
  </body>
  

• 3. 修复组件内未定义变量
     你的组件模板中使用了v-text="buttonText"，但script中没有声明对应的data属性，先临时替换为静态文本测试渲染是否正常：

  <template>
      <div>
          <button class="btn btn-primary ml-4">关注</button>
      </div>
  </template>
  

  确认渲染正常后再补充变量声明：

  export default {
      data() {
          return {
              buttonText: '关注'
          }
      },
      mounted() {
          console.log('Component mounted.')
      }
  }
  

• 4. 排查热更新与编译问题
     停止当前npm run hot服务，执行npm run dev查看终端编译输出，确认无报错后刷新页面，查看控制台是否输出Component mounted.日志：
  • 有日志输出：说明组件已成功挂载，仅内容/样式问题导致不可见
  • 无日志输出：继续向下排查
• 5. 检查Vue版本与编译配置
  • 如果你使用的是Vue3，原有app.js的Vue2写法不兼容，修改为对应Vue3语法：

  require('./bootstrap');
  import { createApp } from 'vue'
  const app = createApp({})
  app.component('follow-button', require('./components/FollowButton.vue').default)
  app.mount('#app')
  

  • 检查项目根目录下的webpack.mix.js，确认已配置Vue编译支持：

  mix.js('resources/js/app.js', 'public/js')
      .vue() // 必须有此行配置
      .postCss('resources/css/app.css', 'public/css', [
          //
      ]);
  

• 6. 调整资源加载位置
     去掉script标签的defer属性，将资源引入代码移到</body>标签之前，避免DOM未加载完成就执行Vue挂载逻辑。

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