Vuetify 无法解析组件

Question

编辑-我查看了“重复”问题，但都没有回答这个问题。没有提供解决方案。

我正在使用 vuetify 并收到“无法解析组件”：

/**
 * main.ts
 *
 * Bootstraps Vuetify and other plugins then mounts the App`
 */

// Plugins
import { registerPlugins } from '@/plugins'
import {VueFire, VueFireAuth} from 'vuefire'

// Components
import App from './App.vue'

// Composables
import { createApp } from 'vue'
import {fbapp} from "./fstore";
import {router} from "./router";
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import {vuetify} from "./vuetify";

// Composables

const vfOptions = {
  firebaseApp: fbapp,
  modules: [ VueFireAuth() ]
}

const app = createApp(App)
app.use(vuetify)
app.use(VueFire, vfOptions)
app.use(router)
app.mount('#app')

和

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

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export const vuetify = createVuetify({
  // theme: {
  //   defaultTheme: 'dark',
  // },
  components,
  directives
})

还有另外 2 个相同的 SO 问题，但解决方案要么是人们没有将组件和指令传递给 createVuetify 方法，要么是他们在编写应用程序时没有

use(vuetify)

。我两者都做，有人能看到我错过了什么吗？

Answer 1

我使用的Vite + Vue3 + Vuetify 配置：

vite.config.js

import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    vuetify({
      autoImport: true
    })
  ]
})

插件/vuetify.ts：

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

import { createVuetify } from 'vuetify'

export default createVuetify({})

main.ts：

import { createApp } from 'vue'
import vuetify from '@/plugins/vuetify'

const app = createApp(App)

app.use(vuetify)

app.mount('#app')

在这种情况下您只需要手动导入实验室组件