将项目从Vuetify 2.x升级到3.x时出现'Uncaught TypeError'错误求助

问题根源 #

你混用了Vuetify 3的初始化API与Vue 2的插件挂载方式：Vuetify 3是为Vue 3设计的插件，其内部逻辑依赖Vue 3的应用实例系统，而@vue/compat提供的Vue.use()无法适配Vue 3插件的结构，导致provides属性找不到，触发报错。

具体修复步骤 #

1. 修改Vuetify挂载方式
   放弃Vue 2风格的Vue.use(vuetify)，改用Vue 3（含compat模式）的应用实例挂载逻辑：

   // main.ts
   import { createApp } from 'vue'; // 替换原Vue导入，使用Vue 3的createApp
   import { createVuetify } from 'vuetify';
   import * as components from 'vuetify/components';
   import * as directives from 'vuetify/directives';
   import App from './App.vue'; // 确保导入根组件
   
   // ...其他导入代码
   
   const vuetify = createVuetify({
     components,
     directives,
   });
   
   // 创建应用实例并挂载插件
   const app = createApp(App);
   app.use(vuetify);
   // 其他插件（如Vue Router、Vuex）也需改用app.use()挂载
   app.mount('#app'); // 挂载到页面DOM节点
   

2. 确保compat模式配置正确
   若需保留Vue 2语法，在构建配置中开启@vue/compat的兼容模式：

   • 使用Vite时，修改vite.config.js：

     export default {
       plugins: [
         vue({
           template: {
             compilerOptions: {
               compatConfig: { MODE: 2 } // 启用Vue 2兼容模式
             }
           }
         })
       ]
     }
     

   • 使用Vue CLI时，修改vue.config.js：

     module.exports = {
       chainWebpack: config => {
         config.resolve.alias.set('vue', '@vue/compat')
         config.module
           .rule('vue')
           .use('vue-loader')
           .tap(options => ({
             ...options,
             compilerOptions: { compatConfig: { MODE: 2 } }
           }))
       }
     }
     

3. 额外适配提示

   • Vuetify 3的组件、指令语法与2.x存在差异，若要保留大量旧代码，可暂时使用vuetify@2.x配合@vue/compat，或逐步迁移Vuetify代码到3.x规范
   • 同步升级其他依赖到Vue 3兼容版本：比如Vue Router 4.x、Vuex 4.x

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