RuoYi-Vue3 代码生成器useDict调用导致页面白屏问题

问题描述

在 RuoYi-Vue3 项目中使用若依代码生成器生成前端页面（<script setup>风格），生成的代码中useDict()直接调用而非通过proxy.useDict()调用，导致打开该页面时整个 Vue 应用崩溃，页面显示白屏。

复现步骤：

1. 在若依代码生成器中，将数据库表的某个字段（如applicable_person）的生成选项设置为下拉框，并指定字典类型（如applicable_levels）
2. 生成前端代码并替换到项目中
3. 打开对应页面，出现白屏
4. 导航到其他功能页面，同样白屏（组件崩溃影响全局路由）

根因分析

核心问题

代码生成器在<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的直接调用，如有则手动修正。