Vue3+Vite环境下使用Vuetify3 Beta渲染函数报错求助

问题背景 #

使用Vue3、Vite和Vuetify3 Beta开发项目时，在渲染函数中导入Vuetify组件触发"文件不存在"报错，但目标文件实际存在。错误截图：

相关代码如下：

RenderFunc.js #

<script>
import { h } from "vue";

import { VCard } from 'vuetify/lib/components';
export default {
  props: {
    level: {
      default: 1
    }
  },
  setup({ level }, { slots }) {
    return () => h(VCard, 'hello')
  }
};
</script>

Vite配置文件 #

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Main.js文件 #

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { createPinia } from 'pinia'
import { loadFonts } from './plugins/webfontloader'

loadFonts()
createApp(App)
  .use(router)
  .use(vuetify)
  .use(i18n)
  .use(createPinia())
  .mount('#app')

Vuetify插件文件 #

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme:{
    themes:{
      light:{
        colors:{
          background: '#F9F9F9'
        }
      }
    }
  }
})

解决步骤 #

1. 修正组件导入路径 #

Vuetify3的组件官方导入路径为vuetify/components，而非旧版的vuetify/lib/components。修改RenderFunc.js的导入语句：

<script>
import { h } from "vue";
import { VCard } from 'vuetify/components';

export default {
  props: {
    level: {
      default: 1
    }
  },
  setup({ level }, { slots }) {
    return () => h(VCard, 'hello')
  }
};
</script>

2. 利用autoImport自动导入（推荐） #

既然Vite配置中已经启用vuetify({ autoImport: true })，插件会自动按需导入Vuetify组件，无需手动import。可以简化代码：

<script>
import { h } from "vue";

export default {
  props: {
    level: {
      default: 1
    }
  },
  setup({ level }, { slots }) {
    // 直接使用组件名的字符串形式
    return () => h('v-card', 'hello')
    // 或保持驼峰式组件名，autoImport会自动识别
    // return () => h(VCard, 'hello')
  }
};
</script>

3. 更新依赖版本 #

确保Vuetify3与vite-plugin-vuetify版本兼容，执行更新命令：

npm update vuetify vite-plugin-vuetify

4. 清除缓存重启服务 #

删除Vite缓存后重启开发服务器，避免缓存导致的异常：

rm -rf node_modules/.vite
npm run dev

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