尝试使用实验室中的 VDataTable 但获取“VDataTable”未由 node_modules/vuetify/lib/components/index.mjs 错误导出

Question

我正在将旧的 Vue 项目迁移到 Vue3 + Vuetify3 + Vite。我被困在 VDataTable 上，它可以通过Vuetify Labs获得。

我已按照说明在 vuetify.js 中导入 VDataTable 组件：

    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;

但是当我尝试<v-data-table>在 MyTable 组件中使用时，我在控制台（vite dev 模式）中收到以下错误，并且该表未显示：

SyntaxError：请求的模块“/node_modules/.vite/deps/vuetify_components.js?v=56a024d1”不提供名为“VDataTable”的导出（位于 MyTable.vue?t=1678324759732:1:199）

我使用 Vite 和 Vuetify3Resolver 进行构建。不确定这是否相关 - 上面的语法不是直接导入组件吗？

另外，运行 avite build我收到以下错误：

    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;

我缺少什么？

我在这里重现了这个问题：https://stackblitz.com/edit/vitejs-vite-unrx3c ?file=src/vuetify.js

Answer 1

我通过更改用于组件导入的插件来实现此目的。我没有使用unplugin-vue-components（和 Vuetify3Resolver），而是添加了vite-plugin-vuetify ，这显然是Vuetify Docs的推荐方式。这使得 VDataTable 的手动导入工作正常。

它简化了 vite.config.js：

import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  plugins: [
    vue(),
    vuetify({ autoImport: true }), // Enabled by default
  ],
});

并且还简化了 vuetify.js，因为您不需要任何 * 导入，因为 vite-plugin-vuetify 会根据需要自动导入组件：

import { createVuetify } from 'vuetify'
import { VDataTable } from 'vuetify/labs/VDataTable'

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