Vue3+Vuetify3+Vite迁移中VDataTable组件导入报错求助

问题背景 #

将旧Vue项目迁移至Vue3 + Vuetify3 + Vite环境，使用Vuetify Labs提供的VDataTable组件时遇到导入错误。已在vuetify.js中全局注册组件：

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { VDataTable } from 'vuetify/labs/VDataTable'

const vuetify = createVuetify({
  components : {
    ...components,
    VDataTable,
  },
  directives,
});
export default vuetify;

错误信息 #

1. Vite开发模式报错

SyntaxError: The requested module '/node_modules/.vite/deps/vuetify_components.js?v=56a024d1' does not provide an export named 'VDataTable' (at MyTable.vue?t=1678324759732:1:199)

2. 构建时报错

'VDataTable' is not exported by node_modules/vuetify/lib/components/index.mjs, imported by src/components/MyTable.vue
file: C:/dev/tpw/src/components/MyTable.vue:3:9
1: /* unplugin-vue-components disabled */import { VWindow as __unplugin_components_4 } from 'vuetify/components';
2: import { VWindowItem as __unplugin_components_3 } from 'vuetify/components';     
3: import { VDataTable as __unplugin_components_2 } from 'vuetify/components';      
            ^

问题原因 #

VDataTable是Vuetify3的实验室组件（Labs Component），并不在vuetify/components包下，而是单独放在vuetify/labs/VDataTable中。但你使用的Vuetify3Resolver（来自unplugin-vue-components）默认只会从vuetify/components自动导入组件，导致它错误地尝试从该路径导入VDataTable，从而触发报错。

解决方案 #

提供三种可行方案，按需选择：

方案1：手动在组件中导入VDataTable #

在使用VDataTable的组件（如MyTable.vue）中，直接从labs路径导入组件，替代自动导入：

<script setup>
import { VDataTable } from 'vuetify/labs/VDataTable'
// 其他业务代码
</script>

<template>
  <v-data-table :items="items" :headers="headers" />
</template>

方案2：配置Vuetify3Resolver识别Labs组件 #

修改vite.config.js，让Vuetify3Resolver包含Labs组件的解析规则：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { Vuetify3Resolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        Vuetify3Resolver({
          labs: ['VDataTable'] // 指定需要解析的Labs组件
        })
      ]
    })
  ]
})

方案3：让自动导入忽略VDataTable组件 #

如果已经全局注册了VDataTable，可在组件中添加注释，禁用该组件的自动导入：

<!-- unplugin-vue-components-ignore -->
<template>
  <v-data-table :items="items" :headers="headers" />
</template>

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