在我的几个项目中集成 nuxt/i18n 后，我得出一个明确的结论：它是目前集成到 JS 框架中最好的 i18n 解决方案。
它的开箱即用设置、命名空间加载以及内置路由功能，让开发体验非常愉悦。
然而，这个方案存在一个主要问题：加载的命名空间无法被 Tree-shaken（按需剔除）。
虽然 JSON 文件可以按语言环境（locale）动态加载，但 Nuxt 最终会将所有 JSON 文件合并在一起，这意味着 locale/zh/about.json 会在所有页面上被加载。
为了说明这个问题，想象一个有 10 个页面的应用，每个页面都完全不同。平均而言，90% 的 JSON 内容会在每个页面上加载，即使这些内容从未渲染在用户的屏幕上。
为了避免这种情况，一种解决方案是在使用 JSON 文件的组件内部动态加载它们。但这很快会导致大量的样板代码和繁琐的语法，严重影响开发时间。
所以我开始思考这个问题。我们如何才能只加载组件实际需要的内容？又如何避免用巨大的 JSON 负载来水合（hydrate）组件？
我的解决方案结合了基于语言环境的动态加载和一个清除未使用的 JSON 内容的后处理转换步骤。
这是文档链接。我很想听听大家的反馈： -> intlayer.org/zh/doc/envi…
关键特性：
- 简单集成： 建立在
nuxt/i18n模块的基础上，集成同样简单。 - 类型安全 (Typesafe)： 提供完整的类型支持。
- 组件级内容拆分： 提供了一种清晰的方式按组件拆分 JSON 内容（1 个
.vue文件对应 1 个.content.ts，可放置在代码库的任何位置）。 - 兼容性： 可以在使用
vue-i18n语法的同时，保留/locale目录中的集中式 JSON 文件。 - 渐进式采用： 可以插入现有的 Vue / Nuxt 应用中以帮助管理 JSON。
- 工具链支持： 提供 CLI / CI 工具来检测缺失的翻译。
- VS Code 扩展： 提供配套的编辑器插件。
- AI 上下文感知翻译： 支持 AI 辅助翻译（使用你自己的 API Key，完全本地运行，不收集数据）。
- 高性能： 包含提取器和编译器，可在一秒钟内转换数千个组件。
