Vue3项目集成Vuetify报错Uncaught TypeError: Cannot read properties of undefined (reading 'extend')

问题原因 #

你的报错不是Vue版本导致的，而是Vuetify的初始化方式错误。你用了Vuetify 2的导入写法，但Vue3必须搭配Vuetify 3，两者的初始化逻辑完全不同。

正确配置步骤 #

• 先确保安装的是Vuetify 3版本（若之前装了旧版，先卸载重装）：

npm uninstall vuetify
npm install vuetify@next

• 修改main.js为Vuetify 3的正确写法：

import { createApp } from 'vue'
import App from './App.vue'
// Vuetify 3的正确导入逻辑
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

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

const app = createApp(App)
app.use(vuetify)
app.mount('#app')

补充说明 #

Vuetify 3针对Vue3的Composition API做了重构，不再支持Vuetify 2中直接import Vuetify from 'vuetify'然后app.use(Vuetify)的方式，必须通过createVuetify实例化后再传入app.use()。

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