Directus自定义界面$t翻译占位符失效问题及方案咨询

功能支持确认 #

Directus 11.3.2 版本完全支持自定义接口使用内置翻译系统，你遇到的$t:占位符未渲染问题，通常是翻译文件未正确注册或路径/键名匹配错误导致的。

惯用实现方式 #

一、官方标准流程 #

这是扩展开发者最常用的方案，完全适配Directus的翻译机制：

1. 创建翻译文件结构
   在自定义接口的扩展目录下新建translations文件夹，按语言代码创建JSON文件（如zh-CN.json、en-US.json）：

   // zh-CN.json
   {
     "interfaces": {
       "my-custom-interface": {
         "name": "我的自定义接口",
         "description": "用于XX场景的自定义输入组件"
       }
     }
   }
   

2. 在接口定义中注册翻译
   在defineInterface配置里通过translations字段引入翻译文件，同时在name、description中使用对应占位符：

   import { defineInterface } from '@directus/extensions-sdk';
   import InterfaceComponent from './component.vue';
   import translations from './translations/*';
   
   export default defineInterface({
     id: 'my-custom-interface',
     name: '$t:interfaces.my-custom-interface.name',
     description: '$t:interfaces.my-custom-interface.description',
     icon: 'square',
     component: InterfaceComponent,
     translations, // 关键：注册翻译文件
     // 其他接口配置...
   });
   

3. 校验键名匹配
   占位符的路径必须和翻译文件的结构完全对应，比如$t:interfaces.my-custom-interface.name对应翻译文件中interfaces.my-custom-interface.name的值。

二、官方内部临时兼容方案 #

如果标准流程因打包或路径问题不生效，可手动在组件中处理翻译：
在Vue组件中使用Directus内置的useI18nAPI手动获取翻译值：

<script setup>
import { useI18n } from 'vue-i18n';
import zhCN from '../translations/zh-CN.json';
import enUS from '../translations/en-US.json';

const { t } = useI18n();

// 可选：若全局未自动注册，手动注入翻译
const messages = {
  'zh-CN': zhCN,
  'en-US': enUS
};
// 直接获取翻译值用于组件或接口定义
const interfaceName = t('interfaces.my-custom-interface.name');
</script>

常见问题排查 #

• 确认translations目录在扩展打包时被正确包含，未被打包工具忽略。
• 检查接口id与翻译文件中的键名前缀一致（如接口id为my-custom-interface，翻译键需为interfaces.my-custom-interface.*）。
• 确保Directus后台的语言设置与翻译文件的语言代码完全匹配（如zh-CN而非zh）。

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