Vue3+Laravel8环境下FollowButton组件未定义报错求助

问题原因分析 #

你代码里的核心问题是app变量在定义前就被使用，同时组件导入方式存在不规范：

1. components.forEach(component => app.component(component.name, component))执行时，app实例还未创建（const app = createApp(...)在后续代码），直接触发变量未定义错误，进而影响组件注册流程。
2. 使用require导入组件不符合Vue 3推荐的ES模块规范，可能引发导出匹配问题。

修复后的app.js代码 #

import { createApp } from 'vue';
// 用ES模块方式导入FollowButton组件
import FollowButton from './components/FollowButton.vue';

// 先创建Vue应用实例
const app = createApp({});

// 注册follow-button组件
app.component('follow-button', FollowButton);

// 若你需要批量注册components数组中的组件，确保数组已提前定义，且在app实例创建后执行
// 示例：
// import components from './components/global-components';
// components.forEach(component => app.component(component.name, component));

app.mount('#app');

额外检查项 #

• 确保index.blade.php中，<follow-button></follow-button>标签被包裹在id="app"的DOM元素内，比如：

  <div id="app">
    <!-- 其他页面内容 -->
    <follow-button></follow-button>
  </div>
  

• 确认FollowButton.vue文件路径正确，文件名大小写与导入时一致（Linux环境下区分大小写）。

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