迁移Vue3并升级Vuetify后出现slots is undefined运行时错误

错误场景 #

使用@vue/compat模式执行vue-cli-service serve时，Vuetify内部LoaderSlot组件抛出slots is undefined错误，导致首页无法正常渲染自定义页面。

排查与修复方案 #

1. 确认Vuetify版本兼容性 #

Vuetify 3.x专为Vue3设计，若升级版本不匹配会触发API兼容问题。执行命令升级到最新适配版本：

npm install vuetify@latest

2. 对齐Vue与@vue/compat版本 #

确保Vue核心包和@vue/compat版本完全一致，避免版本差异导致的API冲突：

npm install vue@latest @vue/compat@latest

同时检查vue.config.js中的compat配置是否正确：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': '@vue/compat'
      }
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            compilerOptions: {
              compatConfig: {
                MODE: 2 // 按需调整为MODE:3以逐步迁移到Vue3语法
              }
            }
          }
        }
      ]
    }
  }
}

3. 修正插槽使用语法 #

Vue3插槽API与Vue2差异较大，检查项目中自定义组件或Vuetify组件的插槽用法：

• 选项式API中需在setup()函数参数中获取slots，而非this.$slots；
• <script setup>中使用useSlots()钩子获取插槽；
• 模板中替换Vue2的slot="xxx"语法为Vue3的v-slot:xxx或#xxx简写。

4. 清理缓存并重启服务 #

缓存残留可能导致旧代码生效，执行以下命令后重新启动服务：

rm -rf node_modules/.cache
npm run serve

5. 排查第三方依赖冲突 #

暂时移除项目中可能与@vue/compat或Vuetify3不兼容的第三方依赖，逐步排查定位冲突源。

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