Vue3+Vuetify3构建后报Could not find defaults instance错误

执行配置了vite build指令的npm run build命令完成项目构建后，运行构建产物时报错，项目使用的依赖版本如下：

• "vuetify": "^3.0.0-beta.4"
• "vue": "^3.2.31"

构建后的应用抛出如下指向不明确的错误：

Error: [Vuetify] Could not find defaults instance

不清楚该错误的具体触发原因，也不了解报错信息中提及的defaults instance具体指代对象，项目相关配置代码如下：

项目入口main.ts文件代码 #

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

loadFonts();

const pinia = createPinia();

createApp(App)
  .use(router)
  .use(vuetify)
  .use(pinia)
  .mount('#app');

plugins目录下vuetify.ts配置文件代码 #

// Styles
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import '../../node_modules/front-end-component-library/dist/style.css';

// Vuetify
import '@fortawesome/fontawesome-free/css/all.css';
import { createVuetify } from 'vuetify';
import {aliases, fa} from 'vuetify/lib/iconsets/fa';
import {mdi} from 'vuetify/lib/iconsets/mdi';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

export default createVuetify({
    components,
    directives,
    theme: {
        themes: {
            JLightTheme: {
                dark: false,
                colors: {
                    background: '#e3e4e0',
                    surface: '#FFFFFF',
                    primary: '#5A392D',
                    'primary-darken-1': '#3700B3',
                    secondary: '#4D5A58',
                    'secondary-darken-1': '#018786',
                    accent: '#e3e4e0',
                    error: '#B00020',
                    info: '#2196F3',
                    success: '#4CAF50',
                    warning: '#FB8C00',
                }
            },
        }
    },
    icons: {
        defaultSet: 'fa',
        aliases,
        sets: {
            fa,
            mdi
        }
    }
});

该错误是Vuetify 3早期beta版本的典型构建兼容问题：
defaults instance是Vuetify 3内部用来存储全局组件默认配置、主题规则、图标映射的核心上下文实例，开发环境下Vite不会做激进的代码剔除，实例可以正常注入到Vue应用上下文；但生产构建阶段，3.0.0-beta.4版本没有正确给核心注入逻辑标记side effect，导致Tree Shaking机制误判这部分代码为无用代码直接删除，最终运行时找不到对应实例抛出错误。

按优先级从高到低排序：

1. 升级Vuetify到正式稳定版（推荐）
   beta版本存在大量未修复的构建、功能兼容问题，直接升级到正式发布的Vuetify 3稳定版可以从根源解决该问题，执行安装命令：

   npm install vuetify@^3.0.0
   

2. 若暂时无法升级版本，添加官方Vite插件修正Tree Shaking识别逻辑
   安装vite-plugin-vuetify插件，修改Vite配置明确标记Vuetify相关代码不被误删：
   首先安装开发依赖：

   npm install -D vite-plugin-vuetify
   

   然后修改项目根目录的vite.config.ts配置：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import vuetify from 'vite-plugin-vuetify'
   
   export default defineConfig({
     plugins: [
       vue(),
       vuetify({ autoImport: true })
     ],
     optimizeDeps: {
       include: ['vuetify']
     },
     build: {
       commonjsOptions: {
         transformMixedEsModules: true
       }
     }
   })
   

3. 临时应急方案（不推荐长期使用）
   若需要快速验证构建产物，可以临时在vite.config.ts中关闭生产环境Tree Shaking绕过问题，该方案会大幅增加构建产物体积，仅适合临时测试：

   export default defineConfig({
     build: {
       treeshake: false
     }
   })
   

内容的提问来源于stack exchange，提问作者Dion Snoeijen