Vite+Linguijs项目中API内容多语言处理方案咨询

针对你遇到的API返回内容多语言处理问题，下面给出两种可行方案，结合你的项目情况选合适的就行：

方案一：让API返回对应语言的内容 #

优势 #

• 翻译更准确，像课程名、作者名这类可能带专业属性或特定名称的内容，后端统一维护翻译库能避免客户端翻译的歧义
• 客户端不用额外处理翻译逻辑，减少计算负担

具体实现 #

1. 前端切换语言后，把当前Lingui的语言标识（比如en/ar）通过请求头或URL参数传给API
   修改你的Axios请求函数：

   import { i18n } from "@lingui/core";
   
   export async function getCourse(id: string) {
     const currentLang = i18n.locale;
     const response = await axios.get(`/course/${id}`, {
       headers: {
         'Accept-Language': currentLang // 用请求头传语言标识
       }
       // 或者用URL参数：`/course/${id}?lang=${currentLang}`
     });
     return response;
   }
   

2. 后端根据传入的语言标识，返回对应语言的title、author等字段
3. 前端直接渲染返回的内容，不用再套t宏：

   <p className="availablecourses__courses-content__bottom-text">
     {title}
   </p>
   

方案二：客户端对API返回的英文内容做翻译 #

适用场景 #

• API没法修改，只能返回英文
• 返回的内容都是通用词汇，翻译歧义低

具体实现 #

1. 把API返回的英文文案（比如课程标题、作者名）作为Lingui的翻译key，提前在本地化JSON文件里配置阿拉伯文翻译
   比如locales/ar/messages.json中：

   {
     "Advanced React Course": "دورة متقدمة في ريإكت",
     "Jane Smith": "جين سميث"
   }
   

2. 渲染时直接用t宏包裹返回的变量，注意要保证API返回的英文和翻译key完全一致：
   修改组件里的代码：

   <p className="availablecourses__courses-content__bottom-text">
     {t(title)} {/* 直接传变量，不用模板字符串 */}
   </p>
   <p className="availablecourses__courses-content__bottom-author">
     {t(author)}
   </p>
   

3. 这些新增的翻译key可以和项目里其他文案一起，通过Crowdin同步管理翻译

额外提醒 #

• 如果API返回的是用户自定义的动态内容（比如用户自己输入的课程名），优先选方案一，因为客户端没法提前配置所有可能的翻译key
• 像"course sections"这类固定文案，还是保持原来的写法，把它作为固定key在本地化文件中配置翻译：

  <p className="availablecourses__courses-content__bottom-coursenumber">
    {course_sections.length} {t`course sections`}
  </p>
  

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