Creation:2024-08-11Last update:2025-08-23

将此文档参考到您的 AI 助手

使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商

此页面的内容已使用 AI 翻译。

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

vue-i18n VS Intlayer | Vue 国际化 (i18n)

本指南比较了两个流行的 Vue 3（及 Nuxt）国际化选项：vue-i18n 和 Intlayer。我们聚焦于现代 Vue 工具链（Vite，Composition API），并评估：

架构与内容组织
TypeScript 与安全性
缺失翻译处理
路由与 URL 策略
性能与加载行为
开发者体验 (DX)、工具链与维护
SEO 与大型项目的可扩展性

简而言之：两者都能实现 Vue 应用的本地化。如果你需要组件范围的内容、严格的 TypeScript 类型、构建时缺失键检查、支持 Tree-shaking 的字典，以及内置的路由/SEO 辅助工具，再加上可视化编辑器和 AI 翻译，那么 Intlayer 是更完整、更现代的选择。

高层定位

vue-i18n - Vue 的事实标准国际化库。支持灵活的消息格式（ICU 风格）、单文件组件（SFC）中的 <i18n> 块用于本地消息，并拥有庞大的生态系统。安全性和大规模维护主要依赖开发者自身。
Intlayer - 面向组件的内容模型，适用于 Vue/Vite/Nuxt，具备严格的 TypeScript 类型检查、构建时校验、摇树优化、路由和 SEO 辅助工具，可选的可视化编辑器/CMS，以及AI 辅助翻译。

并列功能对比（Vue 重点）

显示表格的所有内容

在弹窗中打开表格以清晰地查看所有数据

功能	Intlayer	vue-i18n
组件附近的翻译	✅ 是，内容与组件共置（例如，`MyComp.content.ts`）	✅ 是，通过 SFC `<i18n>` 块（可选）
TypeScript 集成	✅ 高级，自动生成严格类型和键自动补全	✅ 良好的类型定义；严格的键安全性需要额外的设置/规范
缺失翻译检测	✅ 构建时警告/错误和 TS 显示	⚠️ 运行时回退/警告
丰富内容（组件/Markdown）	✅ 直接支持丰富节点和Markdown内容文件	⚠️ 有限支持（组件通过`<i18n-t>`，Markdown通过外部插件）
AI驱动的翻译	✅ 内置使用您自己的AI提供商密钥的工作流程	❌ 未内置
可视化编辑器 / CMS	✅ 免费的可视化编辑器和可选的CMS	❌ 未内置（使用外部平台）
本地化路由	✅ 为 Vue Router/Nuxt 提供生成本地化路径、URL 和 `hreflang` 的辅助工具	⚠️ 非核心功能（使用 Nuxt i18n 或自定义 Vue Router 配置）
动态路由生成	✅ 支持	❌ 不提供（由 Nuxt i18n 提供）
复数化与格式化	✅ 枚举模式；基于 Intl 的格式化工具	✅ ICU 风格消息；Intl 格式化工具
内容格式	✅ `.ts`、`.js`、`.json`、`.md`、`.txt`（YAML 进行中）	✅ `.json`、`.js`（加上 SFC `<i18n>` 块）
ICU 支持	⚠️ 进行中	✅ 支持
SEO 辅助工具（站点地图、robots、元数据）	✅ 内置辅助工具（框架无关）	❌ 非核心功能（Nuxt i18n/社区提供）
SSR/SSG	✅ 支持 Vue SSR 和 Nuxt；不阻塞静态渲染	✅ 支持 Vue SSR/Nuxt
Tree-shaking（仅打包使用的内容）	✅ 构建时按组件进行	⚠️ 部分支持；需要手动代码拆分/异步消息
懒加载	✅ 按语言/词典级别	✅ 支持异步语言消息
清理未使用内容	✅ 是（构建时）	❌ 非内置功能
大型项目可维护性	✅ 鼓励模块化、设计系统友好的结构	✅ 可行，但需要严格的文件/命名空间管理
生态系统 / 社区	⚠️ 较小但增长迅速	✅ Vue 生态系统中庞大且成熟

深度比较

1) 架构与可扩展性

vue-i18n：常见的设置是为每个语言环境使用集中式目录（可选地拆分为文件/命名空间）。SFC <i18n> 块允许局部消息，但随着项目增长，团队通常会回归使用共享目录。
Intlayer：提倡将每个组件的字典存储在其对应组件旁边。这减少了跨团队冲突，保持内容可发现性，并自然限制了漂移/未使用的键。

重要原因： 在大型 Vue 应用或设计系统中，模块化内容比单体目录更易于扩展。

2) TypeScript 与安全性

vue-i18n：良好的 TS 支持；严格键类型通常需要自定义模式/泛型和谨慎的约定。
Intlayer：从您的内容中生成严格类型，提供IDE 自动补全和针对拼写错误/缺失键的编译时错误。

重要性说明： 强类型可以在运行前捕获问题。

3) 缺失翻译处理

vue-i18n：运行时警告/回退（例如，回退到默认语言或键）。
Intlayer：通过构建时检测，针对不同语言和键发出警告/错误。

重要性说明： 构建时强制执行确保生产环境界面干净且一致。

4) 路由与 URL 策略（Vue Router/Nuxt）

两者都支持本地化路由。
Intlayer 提供辅助工具来 生成本地化路径，管理语言前缀，并为 SEO 生成 <link rel="alternate" hreflang> 标签。在 Nuxt 中，它补充了框架的路由功能。

重要性： 减少自定义粘合层，实现跨语言环境的 更清晰的 SEO。

5) 性能与加载行为

vue-i18n：支持异步加载语言消息；避免过度打包需要你自行管理（需谨慎拆分目录）。
Intlayer：在构建时进行 Tree-shaking，并按字典/语言进行 懒加载。未使用的内容不会被打包。

重要性： 更小的包体积和更快的多语言 Vue 应用启动速度。

6) 开发者体验与工具链

vue-i18n：成熟的文档和社区；您通常会依赖外部本地化平台来进行编辑工作流程。
Intlayer：提供免费的可视化编辑器，可选的CMS（支持 Git 或外部化），一个VSCode 扩展，CLI/CI 工具，以及使用您自己的提供商密钥的AI 辅助翻译。

重要原因： 降低运维成本，缩短开发与内容的循环时间。

7) SEO、SSR 与 SSG

两者均支持 Vue SSR 和 Nuxt。
Intlayer：增加了SEO 辅助工具（站点地图/元数据/hreflang），与框架无关，并且能很好地配合 Vue/Nuxt 构建。

重要原因： 实现国际化 SEO，无需定制复杂配置。

为什么选择 Intlayer？（问题与方法）

大多数 i18n 方案（包括 vue-i18n）都从集中式目录开始：

bash

复制代码

复制代码到剪贴板

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json└── src    └── components        └── MyComponent.vue

或者使用按语言区分的文件夹：

bash

复制代码

复制代码到剪贴板

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json└── src    └── components        └── MyComponent.vue

随着应用程序的增长，这通常会减慢开发速度：

对于新组件，你需要创建/编辑远程目录，连接命名空间，并进行翻译（通常通过从 AI 工具手动复制粘贴）。
在更改组件时，你需要寻找共享的键，进行翻译，保持各语言版本同步，删除无用键，并对齐 JSON 结构。

Intlayer 将内容限定在每个组件范围内，并将其保存在代码旁边，就像我们已经对 CSS、故事、测试和文档所做的那样：

bash

复制代码

复制代码到剪贴板

.└── components    └── MyComponent        ├── MyComponent.content.ts        └── MyComponent.vue

内容声明（每个组件）：

./components/MyComponent/myComponent.content.ts

复制代码

复制代码到剪贴板

import { t, type Dictionary } from "intlayer";// 组件示例内容声明const componentExampleContent = {  key: "component-example",  content: {    greeting: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;

在 Vue 中的使用（组合式 API）：

./components/MyComponent/MyComponent.vue

复制代码

复制代码到剪贴板

<script setup lang="ts">import { useIntlayer } from "vue-intlayer"; // Vue 集成const { greeting } = useIntlayer("component-example");</script><template>  <span>{{ greeting }}</span></template>

这种方法：

加快开发速度（声明一次；IDE/AI 自动补全）。
清理代码库（1 个组件 = 1 个字典）。
简化复制/迁移（复制组件及其内容一起复制）。
避免死键（未使用的组件不导入内容）。
优化加载（懒加载组件携带其内容）。

Intlayer 的额外功能（与 Vue 相关）

跨框架支持：支持 Vue、Nuxt、Vite、React、Express 等。
基于 JavaScript 的内容管理：在代码中声明，灵活度高。
每个语言环境的声明文件：为所有语言环境预设内容，工具自动生成其余部分。
类型安全环境：强大的 TypeScript 配置，支持自动补全。
简化内容获取：单一钩子/组合函数获取字典的所有内容。
有序的代码库：一个组件对应一个字典，存放在同一文件夹。
增强的路由功能：为 Vue Router/Nuxt 提供本地化路径和元数据的辅助工具。
Markdown 支持：按语言环境导入远程/本地 Markdown；将 frontmatter 暴露给代码。
免费可视化编辑器和可选 CMS：无需付费本地化平台即可创作；支持 Git 友好的同步。
可摇树内容：仅打包使用的内容；支持懒加载。
静态渲染友好：不阻塞静态站点生成（SSG）。
AI驱动的翻译：使用您自己的AI提供商/API密钥，支持翻译成231种语言。
MCP服务器和VSCode扩展：在您的IDE中自动化i18n工作流和内容创作。
互操作性：在需要时与vue-i18n、react-i18next和react-intl桥接。

何时选择哪一个？

如果您想要标准的Vue方案，并且能够自行管理目录/命名空间，且您的应用是小型到中型（或者您已经依赖Nuxt i18n），请选择vue-i18n。
如果您重视组件范围的内容、严格的TypeScript、构建时保证、摇树优化以及内置的路由/SEO/编辑工具，尤其是针对大型、模块化的Vue/Nuxt代码库，请选择Intlayer。

实用迁移注意事项（vue-i18n → Intlayer）

按功能开始：一次将一个路由/视图/组件迁移到本地 Intlayer 字典。
迁移期间桥接：保持 vue-i18n 目录并行存在；逐步替换查找。
启用严格检查：让构建时检测及早发现缺失的键/语言环境。
采用路由/SEO 辅助工具：标准化语言环境检测和 hreflang 标签。
测量包大小：随着未使用内容被排除，预计包大小会减少。

结论

vue-i18n 和 Intlayer 都能很好地本地化 Vue 应用。区别在于你需要自己构建多少内容，才能实现一个健壮且可扩展的方案：

使用 Intlayer，模块化内容、严格的 TS、构建时安全性、摇树优化的包以及路由/SEO/编辑器工具均为开箱即用。
如果您的团队优先考虑在多语言、组件驱动的 Vue/Nuxt 应用中的可维护性和速度，Intlayer 提供了目前最完整的体验。

有关更多详情，请参阅 '为什么选择 Intlayer？' 文档。

什么是国际化？

Creation:2024-08-11Last update:2025-08-23

将此文档参考到您的 AI 助手

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商

此页面的内容已使用 AI 翻译。

查看英文原文的最新版本

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

vue-i18n VS Intlayer | Vue 国际化 (i18n)

本指南比较了两个流行的 Vue 3（及 Nuxt）国际化选项：vue-i18n 和 Intlayer。我们聚焦于现代 Vue 工具链（Vite，Composition API），并评估：

架构与内容组织
TypeScript 与安全性
缺失翻译处理
路由与 URL 策略
性能与加载行为
开发者体验 (DX)、工具链与维护
SEO 与大型项目的可扩展性

简而言之：两者都能实现 Vue 应用的本地化。如果你需要组件范围的内容、严格的 TypeScript 类型、构建时缺失键检查、支持 Tree-shaking 的字典，以及内置的路由/SEO 辅助工具，再加上可视化编辑器和 AI 翻译，那么 Intlayer 是更完整、更现代的选择。

高层定位

vue-i18n - Vue 的事实标准国际化库。支持灵活的消息格式（ICU 风格）、单文件组件（SFC）中的 <i18n> 块用于本地消息，并拥有庞大的生态系统。安全性和大规模维护主要依赖开发者自身。
Intlayer - 面向组件的内容模型，适用于 Vue/Vite/Nuxt，具备严格的 TypeScript 类型检查、构建时校验、摇树优化、路由和 SEO 辅助工具，可选的可视化编辑器/CMS，以及AI 辅助翻译。

并列功能对比（Vue 重点）

显示表格的所有内容

在弹窗中打开表格以清晰地查看所有数据

功能	Intlayer	vue-i18n
组件附近的翻译	✅ 是，内容与组件共置（例如，`MyComp.content.ts`）	✅ 是，通过 SFC `<i18n>` 块（可选）
TypeScript 集成	✅ 高级，自动生成严格类型和键自动补全	✅ 良好的类型定义；严格的键安全性需要额外的设置/规范
缺失翻译检测	✅ 构建时警告/错误和 TS 显示	⚠️ 运行时回退/警告
丰富内容（组件/Markdown）	✅ 直接支持丰富节点和Markdown内容文件	⚠️ 有限支持（组件通过`<i18n-t>`，Markdown通过外部插件）
AI驱动的翻译	✅ 内置使用您自己的AI提供商密钥的工作流程	❌ 未内置
可视化编辑器 / CMS	✅ 免费的可视化编辑器和可选的CMS	❌ 未内置（使用外部平台）
本地化路由	✅ 为 Vue Router/Nuxt 提供生成本地化路径、URL 和 `hreflang` 的辅助工具	⚠️ 非核心功能（使用 Nuxt i18n 或自定义 Vue Router 配置）
动态路由生成	✅ 支持	❌ 不提供（由 Nuxt i18n 提供）
复数化与格式化	✅ 枚举模式；基于 Intl 的格式化工具	✅ ICU 风格消息；Intl 格式化工具
内容格式	✅ `.ts`、`.js`、`.json`、`.md`、`.txt`（YAML 进行中）	✅ `.json`、`.js`（加上 SFC `<i18n>` 块）
ICU 支持	⚠️ 进行中	✅ 支持
SEO 辅助工具（站点地图、robots、元数据）	✅ 内置辅助工具（框架无关）	❌ 非核心功能（Nuxt i18n/社区提供）
SSR/SSG	✅ 支持 Vue SSR 和 Nuxt；不阻塞静态渲染	✅ 支持 Vue SSR/Nuxt
Tree-shaking（仅打包使用的内容）	✅ 构建时按组件进行	⚠️ 部分支持；需要手动代码拆分/异步消息
懒加载	✅ 按语言/词典级别	✅ 支持异步语言消息
清理未使用内容	✅ 是（构建时）	❌ 非内置功能
大型项目可维护性	✅ 鼓励模块化、设计系统友好的结构	✅ 可行，但需要严格的文件/命名空间管理
生态系统 / 社区	⚠️ 较小但增长迅速	✅ Vue 生态系统中庞大且成熟

深度比较

1) 架构与可扩展性

vue-i18n：常见的设置是为每个语言环境使用集中式目录（可选地拆分为文件/命名空间）。SFC <i18n> 块允许局部消息，但随着项目增长，团队通常会回归使用共享目录。
Intlayer：提倡将每个组件的字典存储在其对应组件旁边。这减少了跨团队冲突，保持内容可发现性，并自然限制了漂移/未使用的键。

重要原因： 在大型 Vue 应用或设计系统中，模块化内容比单体目录更易于扩展。

2) TypeScript 与安全性

vue-i18n：良好的 TS 支持；严格键类型通常需要自定义模式/泛型和谨慎的约定。
Intlayer：从您的内容中生成严格类型，提供IDE 自动补全和针对拼写错误/缺失键的编译时错误。

重要性说明： 强类型可以在运行前捕获问题。

3) 缺失翻译处理

vue-i18n：运行时警告/回退（例如，回退到默认语言或键）。
Intlayer：通过构建时检测，针对不同语言和键发出警告/错误。

重要性说明： 构建时强制执行确保生产环境界面干净且一致。

4) 路由与 URL 策略（Vue Router/Nuxt）

两者都支持本地化路由。
Intlayer 提供辅助工具来 生成本地化路径，管理语言前缀，并为 SEO 生成 <link rel="alternate" hreflang> 标签。在 Nuxt 中，它补充了框架的路由功能。

重要性： 减少自定义粘合层，实现跨语言环境的 更清晰的 SEO。

5) 性能与加载行为

vue-i18n：支持异步加载语言消息；避免过度打包需要你自行管理（需谨慎拆分目录）。
Intlayer：在构建时进行 Tree-shaking，并按字典/语言进行 懒加载。未使用的内容不会被打包。

重要性： 更小的包体积和更快的多语言 Vue 应用启动速度。

6) 开发者体验与工具链

vue-i18n：成熟的文档和社区；您通常会依赖外部本地化平台来进行编辑工作流程。
Intlayer：提供免费的可视化编辑器，可选的CMS（支持 Git 或外部化），一个VSCode 扩展，CLI/CI 工具，以及使用您自己的提供商密钥的AI 辅助翻译。

重要原因： 降低运维成本，缩短开发与内容的循环时间。

7) SEO、SSR 与 SSG

两者均支持 Vue SSR 和 Nuxt。
Intlayer：增加了SEO 辅助工具（站点地图/元数据/hreflang），与框架无关，并且能很好地配合 Vue/Nuxt 构建。

重要原因： 实现国际化 SEO，无需定制复杂配置。

为什么选择 Intlayer？（问题与方法）

大多数 i18n 方案（包括 vue-i18n）都从集中式目录开始：

bash

复制代码

复制代码到剪贴板

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json└── src    └── components        └── MyComponent.vue

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json└── src    └── components        └── MyComponent.vue

或者使用按语言区分的文件夹：

bash

复制代码

复制代码到剪贴板

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json└── src    └── components        └── MyComponent.vue

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json└── src    └── components        └── MyComponent.vue

随着应用程序的增长，这通常会减慢开发速度：

对于新组件，你需要创建/编辑远程目录，连接命名空间，并进行翻译（通常通过从 AI 工具手动复制粘贴）。
在更改组件时，你需要寻找共享的键，进行翻译，保持各语言版本同步，删除无用键，并对齐 JSON 结构。

Intlayer 将内容限定在每个组件范围内，并将其保存在代码旁边，就像我们已经对 CSS、故事、测试和文档所做的那样：

bash

复制代码

复制代码到剪贴板

.└── components    └── MyComponent        ├── MyComponent.content.ts        └── MyComponent.vue

.└── components    └── MyComponent        ├── MyComponent.content.ts        └── MyComponent.vue

内容声明（每个组件）：

./components/MyComponent/myComponent.content.ts

复制代码

复制代码到剪贴板

import { t, type Dictionary } from "intlayer";// 组件示例内容声明const componentExampleContent = {  key: "component-example",  content: {    greeting: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;

import { t, type Dictionary } from "intlayer";// 组件示例内容声明const componentExampleContent = {  key: "component-example",  content: {    greeting: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;

在 Vue 中的使用（组合式 API）：

./components/MyComponent/MyComponent.vue

复制代码

复制代码到剪贴板

<script setup lang="ts">import { useIntlayer } from "vue-intlayer"; // Vue 集成const { greeting } = useIntlayer("component-example");</script><template>  <span>{{ greeting }}</span></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer"; // Vue 集成const { greeting } = useIntlayer("component-example");</script><template>  <span>{{ greeting }}</span></template>

这种方法：

加快开发速度（声明一次；IDE/AI 自动补全）。
清理代码库（1 个组件 = 1 个字典）。
简化复制/迁移（复制组件及其内容一起复制）。
避免死键（未使用的组件不导入内容）。
优化加载（懒加载组件携带其内容）。

Intlayer 的额外功能（与 Vue 相关）

跨框架支持：支持 Vue、Nuxt、Vite、React、Express 等。
基于 JavaScript 的内容管理：在代码中声明，灵活度高。
每个语言环境的声明文件：为所有语言环境预设内容，工具自动生成其余部分。
类型安全环境：强大的 TypeScript 配置，支持自动补全。
简化内容获取：单一钩子/组合函数获取字典的所有内容。
有序的代码库：一个组件对应一个字典，存放在同一文件夹。
增强的路由功能：为 Vue Router/Nuxt 提供本地化路径和元数据的辅助工具。
Markdown 支持：按语言环境导入远程/本地 Markdown；将 frontmatter 暴露给代码。
免费可视化编辑器和可选 CMS：无需付费本地化平台即可创作；支持 Git 友好的同步。
可摇树内容：仅打包使用的内容；支持懒加载。
静态渲染友好：不阻塞静态站点生成（SSG）。
AI驱动的翻译：使用您自己的AI提供商/API密钥，支持翻译成231种语言。
MCP服务器和VSCode扩展：在您的IDE中自动化i18n工作流和内容创作。
互操作性：在需要时与vue-i18n、react-i18next和react-intl桥接。

何时选择哪一个？

如果您想要标准的Vue方案，并且能够自行管理目录/命名空间，且您的应用是小型到中型（或者您已经依赖Nuxt i18n），请选择vue-i18n。
如果您重视组件范围的内容、严格的TypeScript、构建时保证、摇树优化以及内置的路由/SEO/编辑工具，尤其是针对大型、模块化的Vue/Nuxt代码库，请选择Intlayer。

实用迁移注意事项（vue-i18n → Intlayer）

按功能开始：一次将一个路由/视图/组件迁移到本地 Intlayer 字典。
迁移期间桥接：保持 vue-i18n 目录并行存在；逐步替换查找。
启用严格检查：让构建时检测及早发现缺失的键/语言环境。
采用路由/SEO 辅助工具：标准化语言环境检测和 hreflang 标签。
测量包大小：随着未使用内容被排除，预计包大小会减少。

结论

vue-i18n 和 Intlayer 都能很好地本地化 Vue 应用。区别在于你需要自己构建多少内容，才能实现一个健壮且可扩展的方案：

使用 Intlayer，模块化内容、严格的 TS、构建时安全性、摇树优化的包以及路由/SEO/编辑器工具均为开箱即用。
如果您的团队优先考虑在多语言、组件驱动的 Vue/Nuxt 应用中的可维护性和速度，Intlayer 提供了目前最完整的体验。

有关更多详情，请参阅 '为什么选择 Intlayer？' 文档。

什么是国际化？