RuoYi-Vue3代码生成器useDict白屏问题排查与修复

RuoYi-Vue3 代码生成器useDict调用导致页面白屏问题问题描述在 RuoYi-Vue3 项目中使用若依代码生成器生成前端页面script setup风格生成的代码中useDict()直接调用而非通过proxy.useDict()调用导致打开该页面时整个 Vue 应用崩溃页面显示白屏。复现步骤在若依代码生成器中将数据库表的某个字段如applicable_person的生成选项设置为下拉框并指定字典类型如applicable_levels生成前端代码并替换到项目中打开对应页面出现白屏导航到其他功能页面同样白屏组件崩溃影响全局路由根因分析核心问题代码生成器在script setup中生成了如下代码const{course_subject,applicable_levels}useDict(course_subject,applicable_levels)但useDict并没有在该文件中被import也没有通过 Vite 的 auto-import 插件自动导入。为什么 useDict 不可用在 RuoYi-Vue3 中useDict的注册方式是在 main.js 中作为全局属性挂载的import{useDict}from/utils/dictapp.config.globalProperties.useDictuseDict这意味着在 Options API 中可以通过this.useDict()访问而在script setup中必须通过getCurrentInstance().proxy.useDict()来访问。项目的 Vite auto-import 插件unplugin-auto-import只自动导入了 vue、vue-router、pinia并没有导入/utils/dict中的useDict。对比其他正常页面的写法项目中所有正常工作的页面都使用proxy.useDict(...)调用const{proxy}getCurrentInstance()const{sys_normal_disable}proxy.useDict(sys_normal_disable)而代码生成器生成的页面直接调用了useDict(...)缺少proxy.前缀导致运行时抛出 ReferenceError: useDict is not defined。Vue 组件在 setup 阶段崩溃整个路由视图白屏且后续导航也无法恢复。修复方案将useDict(...)改为proxy.useDict(...)。修复前const{proxy}getCurrentInstance()const{course_subject,applicable_levels}useDict(course_subject,applicable_levels)修复后const{proxy}getCurrentInstance()const{course_subject,applicable_levels}proxy.useDict(course_subject,applicable_levels)影响范围所有通过若依代码生成器生成的、使用了字典类型的script setup页面都可能存在此问题如果页面没有使用字典下拉框则不会触发此问题注意事项若依代码生成器在生成script setup风格的 Vue3 组件时字典调用应统一使用proxy.useDict(...)形式以确保与项目的全局属性注册方式一致。在使用代码生成器后应检查生成的代码中是否存在useDict的直接调用如有则手动修正。