使用Lingui时TypeScript对象内翻译不生效求助

针对你遇到的Lingui生产环境只显示翻译键的问题，结合你提到的翻译已正确提取、编译的前提，从以下几个方向排查：

1. 检查生产构建的宏编译配置 #

Lingui的t宏依赖编译期转换（比如@lingui/babel-plugin-transform-js或@lingui/swc-plugin），生产环境如果没配置好，宏不会被替换成实际的翻译调用，直接输出键值。

• 确认构建工具（Vite/Webpack/Rollup）在生产模式下，是否启用了Lingui的编译插件：
  • 比如Vite中，vite-plugin-lingui是否在生产构建时正常工作，有没有在vite.config.ts里正确配置；
  • Webpack中，babel-loader是否包含@lingui/babel-plugin-transform-js，且生产环境没有禁用该插件。
• 验证方式：查看生产构建后的打包代码，搜索翻译键，如果看到t("xxx")的原始宏调用，说明宏没被编译，这就是问题所在。

2. 语言包的加载与激活时机 #

即使语言包编译正确，如果加载时机晚于组件渲染，或者激活语言的步骤有误，组件会在i18n实例未初始化对应语言时渲染，导致显示键。

• 确保在组件挂载前完成语言包的导入和i18n.activate()：

  // 示例：在App入口提前加载并激活语言
  import { i18n } from "@lingui/core";
  import { en } from "./locales/en/messages";
  import { zh } from "./locales/zh/messages";
  
  // 先注册语言包
  i18n.load({
    en,
    zh,
  });
  // 再激活当前语言（比如从localStorage或URL参数获取）
  i18n.activate(localStorage.getItem("lang") || "zh");
  

• 如果是动态加载语言包，要确保加载完成后再渲染组件（比如用Suspense或状态控制）。

3. TypeScript对象中t宏的上下文问题 #

如果你的翻译是定义在**普通TS对象（非组件函数内部）**中，t宏可能无法获取到i18n的上下文，因为Lingui的t默认依赖组件内的useLingui钩子提供的上下文。

• 解决方法：
  • 把对象定义改成函数，在组件内调用时再生成（确保在i18n上下文内执行）：

    // 不好的写法：全局对象，t宏无上下文
    const menuItems = [
      { label: t("menu.home"), path: "/" },
    ];
    
    // 好的写法：组件内生成，或用函数包裹
    const getMenuItems = () => [
      { label: i18n._("menu.home"), path: "/" },
    ];
    // 组件内调用：
    const menuItems = getMenuItems();
    

  • 或者直接使用全局i18n._()方法代替t宏，手动传入翻译键。

4. 排查Tree Shaking导致语言包丢失 #

生产环境的Tree Shaking可能误将语言包代码标记为未使用而移除，导致运行时没有翻译数据。

• 确保语言包被显式引用，而不是通过动态导入被摇掉：
  • 比如不要用import()动态导入后没赋值给变量，或者在配置文件中直接注册所有语言包；
  • 如果使用动态导入，可以添加/* webpackChunkName: "locales-[request]" */这样的注释，避免被摇掉。

快速验证步骤 #

打开生产环境的浏览器控制台，执行i18n._("你的翻译键")，看是否能返回正确的翻译文本：

• 如果能返回，说明语言包已加载，问题出在组件调用t宏的方式；
• 如果返回的还是键，说明语言包没加载或没激活。

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