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/dict'app.config.globalProperties.useDict=useDict这意味着在 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的直接调用，如有则手动修正。