# General Translation Knowledge Base: General Translation 与 vue-i18n 对比：该选哪一个？
URL: https://generaltranslation.com/zh/kb/general-translation-vs-vue-i18n.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: General Translation 让 Vue 团队可以直接在模板中编写源文案，并通过 CLI 生成译文。其 gt-vue 插件在渲染这些内容时，会应用符合区域设置的复数形式和数字格式化。如果你希望免去维护基于键的源文件，可以选择它；而对于使用 Nuxt i18n 模块、已有成熟目录工作流的团队，vue-i18n 依然是合适的选择。
Category: 国际化
Last updated: 2026-10-16
Authors: Kevin Wu, Jackie Chen
Published: 2026-10-16

vue-i18n 负责在 Vue 应用中以用户的语言渲染消息。你需要为每个区域设置定义消息，在模板中按键查找，再由它格式化复数形式、日期和数字。但它本身不做任何翻译：每种语言的消息都得由你、你的译者或翻译管理系统 (TMS) 提供。General Translation 的 `gt-vue` 渲染译文的方式与之相同，不仅如此，General Translation 还能根据你在模板中内联编写的文案直接生成译文。

## vue-i18n 的优势

* **成熟度。** vue-i18n 自 2014 年起就已发布在 npm 上。[版本 11 是当前维护的版本线](https://vue-i18n.intlify.dev/guide/maintenance)，版本 12 目前处于 alpha 阶段。
* **Nuxt。** [`@nuxtjs/i18n` 模块基于 vue-i18n 11 构建](https://i18n.nuxtjs.org/docs/getting-started)，并提供带区域设置前缀的路由、本地化路径、浏览器语言检测、译文懒加载，以及 hreflang 替代项等 SEO 标签。
* **格式化与富文本。** `datetimeFormats` 和 `numberFormats` 接受 `Intl` 选项；[`<i18n-t>` 组件](https://vue-i18n.intlify.dev/guide/advanced/component)无需借助 `v-html`，即可在翻译后的消息中嵌入元素。
* **消息与组件就近存放。** 借助 `@intlify/unplugin-vue-i18n`，[`<i18n>` 块](https://vue-i18n.intlify.dev/guide/advanced/sfc)可将组件的消息直接放在其单文件组件中。
* **工具链。** [官方 ESLint 插件](https://eslint-plugin-vue-i18n.intlify.dev/rules/)可以标记模板中的硬编码文本，以及缺失或未使用的键。

## vue-i18n 留给你自己处理的部分

下面是一个用 vue-i18n Composition API 实现的简易收件箱。每个字符串都有一个对应的键，英文文本则存放在消息文件中：

```json title="locales/en.json"
{
  "inbox": {
    "heading": "Inbox",
    "unread": "You have {n} unread message | You have {n} unread messages"
  }
}
```

```vue title="Inbox.vue"
<script setup>
import { useI18n } from 'vue-i18n'

defineProps({ count: { type: Number, required: true } })
const { t } = useI18n()
</script>

<template>
  <section>
    <h1>{{ t('inbox.heading') }}</h1>
    <p>{{ t('inbox.unread', count) }}</p>
  </section>
</template>
```

每种目标语言都需要翻译好的消息，可由你的团队或翻译服务提供。就本示例而言，有两个实现细节需要注意：

* **复数规则。** vue-i18n 11 的默认规则按位置选择复数形式。波兰语使用 `one`、`few`、`many` 和 `other` 四个类别，因此需要配置[自定义 `pluralRules` 函数](https://github.com/intlify/vue-i18n/blob/master/docs/guide/v11/essentials/pluralization.md)，将数量映射到对应的译文形式。仍处于 alpha 阶段的 vue-i18n 12 已[改用 `Intl.PluralRules`](https://github.com/intlify/vue-i18n/releases/tag/v12.0.0-alpha.4)。
* **消息中的数字。** 复数消息中的 `{n}` 不会按区域设置进行格式化，因此除非传入已格式化的值，否则 12345 在西班牙语中会渲染为“12345”，而不是“12.345”。

## 内联模板与自动生成的译文

`gt-vue` 的作用与 vue-i18n 相同：它会渲染每个区域设置的消息，按照各区域设置的 CLDR 规则选择复数形式，并通过 [`<Num>`](/docs/vue/reference/components/num)、[`<Currency>`](/docs/vue/reference/components/currency) 和 [`<DateTime>`](/docs/vue/reference/components/datetime) 格式化数字、货币和日期。不仅如此，General Translation 还能做到 vue-i18n 做不到的事：自动生成译文。下面还是同一个收件箱示例，只不过文案直接内联在代码中：

```vue title="Inbox.vue"
<script setup>
import { Num, Plural, T } from 'gt-vue'

defineProps({ count: { type: Number, required: true } })
</script>

<template>
  <section>
    <T><h1>Inbox</h1></T>
    <p>
      <T>
        <Plural :n="count">
          <template #singular>You have <Num :value="count" /> unread message</template>
          <template #plural>You have <Num :value="count" /> unread messages</template>
        </Plural>
      </T>
    </p>
  </section>
</template>
```

[`npx gt translate`](/docs/cli/reference/commands/translate) 会扫描你的模板，将每个 [`<T>`](/docs/vue/reference/components/t) 代码块连同其结构发送到 General Translation API，并为每个目标区域设置生成一个目录。`singular` 和 `plural` 插槽为目标语言的各种复数形式提供源文本。[`<Plural>`](/docs/vue/reference/components/plural) 根据区域设置规则选择相应形式，[`<Num>`](/docs/vue/reference/components/num) 则负责格式化数量：英语中为 12,345，西班牙语中为 12.345，波兰语中为 12 345。

本示例使用 `gt-vue` 0.1.22 及 Vue 3.3 或更高版本；插件和目录加载器的初始化设置请参阅 [Vue 快速入门](/docs/vue/quickstart)。你的团队可以在[仪表板](/docs/platform/dashboard/guides/reviewing-translations)中润色生成的文本，并借助[共享的词汇表术语和自定义提示词](/docs/platform/dashboard/guides/defining-context-for-translations)让各项目的术语保持一致。

## vue-i18n 与 General Translation 对比一览

| 功能     | vue-i18n                                      | General Translation (`gt-vue`)                                            |
| ------ | --------------------------------------------- | ------------------------------------------------------------------------- |
| 文案编写方式 | 为每个区域设置在消息文件或 `<i18n>` 块中编写键                  | 直接在模板中内联编写，置于 [`<T>`](/docs/vue/reference/components/t) 内                 |
| 翻译你的内容 | 否                                             | 是，使用 [`npx gt translate`](/docs/cli/reference/commands/translate)         |
| 复数形式   | 各形式以竖线分隔；版本 11 需要为波兰语等语言自定义规则                 | [`<Plural>`](/docs/vue/reference/components/plural) 插槽，按 CLDR 规则为每个区域设置选择 |
| 消息中的数字 | 需传入已格式化的值                                     | [`<Num>`](/docs/vue/reference/components/num) 按各区域设置自动格式化                 |
| 应用集成   | Vue 插件；`@nuxtjs/i18n` 提供 Nuxt 路由、语言检测和 SEO 标签 | Vue 插件，支持响应式切换区域设置和加载目录                                                   |

如果你依赖 `@nuxtjs/i18n` 实现 Nuxt 路由和 SEO，或者想沿用现有的目录工作流，请继续使用 vue-i18n。如果你希望 Vue 模板中的文案保持可读、在构建时生成译文，并让审阅者在仪表板中编辑译文，请选择 General Translation。

## 从 vue-i18n 迁移

每次迁移一个组件：将每处键查找替换为对应的英文文案，并放入 [`<T>`](/docs/vue/reference/components/t) 中；再将以竖线分隔的复数消息改写为 [`<Plural>`](/docs/vue/reference/components/plural) 的 `singular` 和 `plural` 插槽，如上例所示。尚未迁移的组件可继续使用 vue-i18n 及其已审校的目录。按照 [Vue 快速入门](/docs/vue/quickstart) 设置 `gt-vue`，然后在构建前运行 [`npx gt translate`](/docs/cli/reference/commands/translate)。

## 为什么 vue-i18n 在波兰语中显示的复数形式不正确？

在 vue-i18n 11 中配置 `pluralRules` 函数，将波兰语的复数类别映射到消息中对应的位置。例如，1 对应 `one`，2 和 22 对应 `few`，5 对应 `many`。使用 General Translation 时，由内联示例提供源文本，服务生成各个翻译形式，再由 [`<Plural>`](/docs/vue/reference/components/plural) 负责选出合适的形式。

## 要点总结

* vue-i18n 是一款成熟的 i18n 插件，对 Nuxt 支持良好，但它本身不负责翻译；此外，在 11 版本中，波兰语等语言还需要自定义复数规则。
* General Translation 的 CLI 会根据内联的 [`<T>`](/docs/vue/reference/components/t) 块生成译文；`gt-vue` 则针对每个区域设置渲染这些译文，并处理复数选择和数字格式化。
* 如果已有成熟的 Nuxt 或目录工作流，可继续使用 vue-i18n；如果不想再维护基于键的源文件，请选择 `gt-vue`。

## Related questions

- [General Translation 与 i18next、react-intl 和 next-intl 对比：应该选择哪个国际化库？](https://generaltranslation.com/zh/kb/general-translation-vs-i18n-libraries.mdx): i18next、react-intl 和 next-intl 等开源库本身并不翻译任何内容。它们只负责显示你在各语言目录文件中提供的译文，这些译文由你、你的译者或其他服务编写。General Translation 的库同样开源，承担同样的工作，此外 General Translation 还会以你的代码为上下文完成翻译。
- [i18next 替代方案：General Translation 与 i18next 对比](https://generaltranslation.com/zh/kb/general-translation-vs-i18next.mdx): 如果你希望将文案内联在 React 组件中，并借助其 JSX 结构和产品上下文生成译文，请选择 General Translation。你也可以继续使用 i18next，并用 General Translation 翻译现有的目录。i18next 负责消息渲染和复数形式选择，译文则需要由单独的服务生成。
- [General Translation 与 Lingui：该选哪一个？](https://generaltranslation.com/zh/kb/general-translation-vs-lingui.mdx): 如果你希望像使用 Lingui 一样将文案内联在代码中，同时以 JSX 结构作为上下文自动生成译文，请选择 General Translation。Lingui 会将内联消息提取到消息目录中，交由译者或已连接的服务翻译。General Translation 的 CLI 会随代码变更自动更新译文，你的团队可以在仪表板中审阅。
- [react-intl 替代方案：General Translation 与 react-intl 对比](https://generaltranslation.com/zh/kb/general-translation-vs-react-intl.mdx): General Translation 让 React 团队在保留 ICU 消息语法的同时，获得译文生成、共享术语和仪表板审校能力。react-intl 提供格式化功能和 FormatJS 目录工具；General Translation 还能直接生成译文。
- [不用翻译文件也能做 i18n 吗？](https://generaltranslation.com/zh/kb/i18n-without-translation-files.mdx): 可以。使用 gt-react 或 gt-next 时，内容以内联方式直接写在组件中的 `<T>` 组件内，译文在构建时作为输出生成，因此无需编写键，也无需为每个区域设置编写 JSON 文件并保持同步。

## Previous and next questions

- Previous question: [General Translation 与 Tolgee：该如何选择？](https://generaltranslation.com/zh/kb/general-translation-vs-tolgee.mdx)
- Next question: [General Translation 与 Weblate：该选哪一个？](https://generaltranslation.com/zh/kb/general-translation-vs-weblate.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/zh/kb/sitemap.md) for every article.