Laravel 9 Vue SPA中如何正确集成Vuetify并解决运行报错？

你遇到的vue__WEBPACK_IMPORTED_MODULE_0___default.a is undefined错误由版本不兼容直接导致：

• Vuetify 2.x 全系列仅支持 Vue 2，和你当前使用的 Vue 3 完全不匹配
• 你在官方文档看到的import Vue from 'vue'是 Vue 2 的标准初始化写法，和 Vue 3 的createApp初始化逻辑不通用，强行混用就会触发webpack模块导入的类型错误。

根据你的技术栈选择对应方案即可：

方案1：保留Vue 3，升级Vuetify到3.x版本（推荐） #

Vuetify 3.x 是官方适配 Vue 3 的版本，适配Laravel 9的构建环境，操作步骤：

1. 卸载当前不兼容的Vuetify 2.6版本：

npm uninstall vuetify

2. 安装Vue3适配版Vuetify及必要依赖：

npm install vuetify@^3.0.0 sass

3. 修正resources/js/app.js的引入和初始化逻辑，正确代码如下：

import Alpine from 'alpinejs';
import { createApp } from 'vue';
import router from './router'
import { createPinia } from 'pinia'
// Vuetify 3 正确引入方式
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

import UserName from './components/layout/UserName.vue'
import NavigationLinks from './components/layout/NavigationLinks.vue'

require('./bootstrap');

// 初始化Vuetify实例
const vuetify = createVuetify({
  components,
  directives,
})

createApp({
    components: {
        UserName,
        NavigationLinks,
    }
})
.use(createPinia())
.use(router)
.use(vuetify)
.mount('#app')

window.Alpine = Alpine;
Alpine.start();

原代码的两处配置错误会同步修正：

• 不需要在createApp的根配置对象里传入vuetify属性
• 不能直接.use(Vuetify)构造函数，必须传入提前初始化完成的vuetify实例

方案2：保留Vuetify 2.6，降级Vue到2.x版本 #

如果业务强依赖Vuetify 2.6的特性，就需要把项目内的Vue版本降级到2.x，同时配套替换为Vue2兼容版本的vue-router、Pinia（Vue2下使用Pinia需要额外安装@vue/composition-api依赖），初始化逻辑改回Vue2的new Vue()写法即可。该方案需要调整的依赖较多，无特殊需求不推荐使用。

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