Nuxt3项目中Vuetify组件突然无法识别/加载问题求助

API 探路者

2026-7-24

Nuxt3 + Vuetify 组件突然无法识别的问题

环境信息

Node.js 版本：19.9
Nuxt：3.4.1
Vuetify：3.1.14

问题详情

项目原本按教程配置后运行正常，开发3-4小时后，Vuetify组件突然无法被识别，控制台抛出报错。但VSCode编辑器内代码显示正常，能正常查看组件类型提示。怀疑是添加@nuxtjs/eslint-module后引发的问题，求解决办法。

相关配置代码

nuxt.config.ts

export default defineNuxtConfig({
    css: [
        'vuetify/lib/styles/main.sass',
        '@mdi/font/css/materialdesignicons.min.css',
    ],
    build: {
        transpile: ['vuetify'],
    },

    modules: [
        '@nuxtjs/i18n',
        '@nuxtjs/eslint-module',
    ],

    i18n: {
        lazy: true,
        langDir: 'locales',
        strategy: 'prefix_except_default',
        defaultLocale: 'en-Us',
        locales: [
            {
                code: 'en-Us',
                file: 'en-US.js',
                name: 'English(US)',
                iso: 'en-US',
            }
        ]
    },

    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    },
    
});

~/plugins/vuetify.ts

import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import { md1 } from 'vuetify/blueprints';

export default defineNuxtPlugin((nuxt) => {
    const vuetify = createVuetify({
        ssr: true,
        components,
        directives,
        blueprint: md1,
        theme: {
            defaultTheme: 'dark',
        }
    });
    
    nuxt.vueApp.use(vuetify);
});