在Laravel中集成Vue 3时遇‘vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined’错误

错误原因 #

你安装的是Vue 3，但app.js中使用的是Vue 2的语法。Vue 3采用ES模块导出，不再提供默认的Vue构造函数，因此import Vue from 'vue'会返回undefined，触发后续的类型错误。

修复步骤 #

1. 修改app.js适配Vue 3语法 #

将原有的Vue 2风格代码替换为Vue 3的写法：

方式一（保留require导入组件）

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

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

// 注册全局组件
app.component('mosque-component', require('./components/MosqueComponent.vue').default)
app.component('prayer-component', require('./components/PrayerComponent.vue').default)
app.component('time-component', require('./components/TimeComponent.vue').default)

// 挂载到指定DOM元素
app.mount('#content')

方式二（推荐使用ES模块导入组件）

import { createApp } from 'vue'
import './bootstrap'
// 直接导入组件
import MosqueComponent from './components/MosqueComponent.vue'
import PrayerComponent from './components/PrayerComponent.vue'
import TimeComponent from './components/TimeComponent.vue'

const app = createApp({})

app.component('mosque-component', MosqueComponent)
app.component('prayer-component', PrayerComponent)
app.component('time-component', TimeComponent)

app.mount('#content')

2. 重新编译前端资源 #

在项目根目录运行以下命令，重新编译app.js：

npm run dev

如果需要实时监听文件变化自动编译，使用：

npm run watch

3. 验证组件文件格式 #

确保你的.vue组件文件是Vue 3兼容的格式，比如单文件组件的script部分可以使用：

<script>
export default {
  // 组件逻辑
}
</script>

或者Vue 3的<script setup>语法：

<script setup>
// 组件逻辑
</script>

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