HTML多语言导出设置全攻略

HTML本身并不具备导出语言包的能力，所谓“HTML多语言导出”实则是依赖构建工具（如i18next-parser、vue-i18n、react-intl等）在代码扫描阶段识别特定翻译函数调用（如`t()`、`$t()`、`formatMessage`），通过AST分析提取键值对并写入JSON等语言文件的过程；关键在于让文本“可被提取”——需避免硬编码、规范使用翻译函数包裹、谨慎处理动态拼接，而`lang`和`hreflang`仅影响SEO与辅助技术，与翻译逻辑完全无关；真正决定语言包是否生成的，是构建配置的准确性——路径、函数名、输出规则缺一不可，任何疏漏都会导致翻译键丢失，上线后仍显示原始文本。

HTML里没有“导出语言包”这个功能

HTML 本身是静态标记语言，不负责语言包生成、导出或国际化（i18n）逻辑。所谓“HTML标注导出语言包选项”，实际是前端构建流程或框架工具链的职责，比如 vue-i18n、react-intl、i18next 或基于 gettext 的提取工具。浏览器渲染 HTML 时，只认 lang 属性和文本内容，不会自动扫描、收集、导出翻译键值。

怎么让 HTML 文本被提取工具识别为待翻译项

关键不是“导出”，而是“可提取”——得让工具能定位到哪些字符串需要进语言包。常见做法有：

• 用特定函数包裹文本，如 $t('login.button')（Vue）、formatMessage({ id: 'login.button' })（React Intl），工具通过 AST 扫描这些调用
• 避免硬编码中文/英文在 innerHTML 或属性里，比如不要写 提交，而应写 （配合 i18next-parser 等工具）
• HTML 模板中慎用动态拼接：
  欢迎，{name}
  会破坏提取完整性；应改用带占位符的 key：$t('welcome', { name })

lang 属性和 hreflang 只影响 SEO 和读屏器，不触发翻译

lang 是声明当前文档或节点的自然语言，hreflang 用于 或 标注多语言页面跳转关系。它们都不参与语言包生成或运行时切换：

module.exports = {
  locales: ['zh', 'en'],
  output: 'src/locales/$LOCALE/$NAMESPACE.json',
  lexers: {
    js: ['JsxLexer'], // 支持 React JSX
  },
  functions: ['t', 'i18next.t', 'useTranslation'], // 明确指定哪些函数要扫描
};