Vue Vben Admin 国际化(i18n)动态翻译问题解析

问题背景

在使用 Vue Vben Admin 框架开发国际化应用时，开发者可能会遇到一个常见问题：通过 VbenFormProps.componentProps.options 传入的国际化文本无法正确解析显示。具体表现为直接显示翻译键（如 enum.status.ON）而非实际翻译内容。

问题复现

开发者通常会这样定义选项列表：

export const statusList = [
  { value: 'ON', label: $t('enum.status.ON') },
  { value: 'OFF', label: $t('enum.status.OFF') },
];

然后在表单配置中使用：

const formOptions: VbenFormProps = {
  schema: [
    {
      component: 'Select',
      fieldName: 'status',
      label: $t('ui.table.status'),
      componentProps: {
        options: statusList,
        placeholder: $t('ui.placeholder.select'),
      },
    },
  ],
};

问题本质

这个问题并非 Vue Vben Admin 框架的国际化功能缺陷，而是 JavaScript/TypeScript 模块系统的特性导致的：

1. 模块加载时机：当模块被导入时，其中的常量已经初始化完成，$t 函数在模块加载时就已经执行，结果被固化
2. 响应性缺失：直接导出的常量不具备响应性，无法感知语言切换的变化
3. 静态分析限制：构建工具无法追踪模块内部使用的国际化键值

解决方案

方案一：使用函数返回

将常量改为函数，每次调用时重新计算翻译：

export const getStatusList = () => [
  { value: 'ON', label: $t('enum.status.ON') },
  { value: 'OFF', label: $t('enum.status.OFF') },
];

使用时：

componentProps: {
  options: getStatusList(),
}

方案二：使用计算属性

利用 Vue 的响应式系统：

import { computed } from 'vue';

export const statusList = computed(() => [
  { value: 'ON', label: $t('enum.status.ON') },
  { value: 'OFF', label: $t('enum.status.OFF') },
]);

方案三：直接内联定义

对于简单场景，可以直接在组件内定义：

componentProps: {
  options: [
    { value: 'ON', label: $t('enum.status.ON') },
    { value: 'OFF', label: $t('enum.status.OFF') },
  ],
}

最佳实践建议

1. 避免在模块顶层使用$t：模块顶层的$t调用会在模块加载时执行，结果会被固化
2. 优先使用函数或计算属性：确保翻译能够响应语言切换
3. 考虑性能影响：对于大型选项列表，使用记忆化(memoization)技术避免不必要的重复计算
4. 统一管理选项数据：可以创建一个专门的选项服务来管理所有这类数据

深入理解

这个问题实际上反映了前端开发中一个更普遍的概念：静态初始化与动态响应的冲突。在模块系统中，所有顶层代码都只会在模块首次导入时执行一次，而国际化功能需要能够动态响应语言变化。理解这一点有助于开发者避免类似的问题，不仅在国际化场景，在其他需要响应式行为的场景也同样适用。

通过采用上述解决方案，开发者可以确保 Vue Vben Admin 中的国际化功能在各种场景下都能正常工作，同时保持代码的可维护性和性能。