如何在Vue 3项目中安装配置Vuetify 2.5.6？

• Vuetify 2.x 仅支持 Vue 2 运行环境，和 Vue 3 完全不兼容，你的代码同时混用了 Vue 3 初始化逻辑和 Vue 2 专属的 Vuetify 2 版本，是触发报错的核心原因。

可选修复方案 #

方案1：保留 Vue 3 环境，升级到适配 Vue 3 的 Vuetify 3 版本 #

1. 先卸载旧版 Vuetify 并安装适配版本依赖

npm uninstall vuetify
npm install vuetify@^3.0.0 @mdi/font

2. 修改 plugins/vuetify.js 代码为 Vue 3 适配写法

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import '@mdi/font/css/materialdesignicons.css'

export default createVuetify({
  components,
  directives,
  icons: {
    iconfont: 'mdi'
  }
})

3. 你现有 main.js 的代码符合 Vue 3 初始化逻辑，无需调整。

方案2：必须使用 Vuetify 2.5.6 时，降级到 Vue 2 运行环境 #

1. 先卸载 Vue 3 并安装 Vue 2 依赖

npm uninstall vue
npm install vue@^2.7.0

2. 修改 main.js 代码为 Vue 2 适配写法

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

3. 你现有 plugins/vuetify.js 的代码符合 Vue 2 逻辑，无需调整。

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