Laravel中使用Vue3出现Vue is not defined错误的解决方法

你的问题出在Vue 3的组件注册方式和语法使用错误，具体修正点如下：

• Vue 3不再提供全局的Vue对象，不能直接用Vue.component注册组件，必须通过createApp创建的应用实例来完成组件注册
• 代码里require('./components/mainapp.vue').dafault是拼写错误，应该为default
• 导入createApp的方式需要调整，确保正确引入Vue模块

修正后的app.js代码：

require('./bootstrap');
// 正确引入Vue 3的createApp方法
import { createApp } from 'vue';
// 正确导入组件，修正拼写错误
import MainApp from './components/mainapp.vue';

const app = createApp({
  /* root component options */
});

// 通过app实例注册组件
app.component('mainapp', MainApp);

app.mount('#app');

如果不需要额外的根组件配置，也可以用更简洁的写法直接挂载组件：

require('./bootstrap');
import { createApp } from 'vue';
import MainApp from './components/mainapp.vue';

// 直接将组件作为根组件挂载到#app
createApp(MainApp).mount('#app');

修改完成后，重新编译前端资源（执行npm run dev或npm run build），刷新页面即可正常显示Vue组件内容。

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