# General Translation Knowledge Base: 如何翻译 Vue 应用？
URL: https://generaltranslation.com/zh/kb/translate-vue-app.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 翻译 Vue 应用，就是让每个模板字符串都按当前语言进行查找，并将其翻译成每种目标语言。General Translation 的 gt-vue 插件会翻译包裹在 `<T>` 组件中的内容，npx gt translate 则会为每种目标语言生成一个目录。
Category: 国际化
Last updated: 2026-10-21
Authors: Kevin Liu, Kevin Wu
Published: 2026-10-21

翻译 Vue 应用分为两步：先进行国际化 (让应用能够以当前语言显示每个字符串、复数、数字和日期) ，再将每个字符串翻译成各目标语言。每次修改文案都会改动源文本，因此如果不重新生成译文，每次发布时译文都会落后于源文本。此外，各语言的语法也不尽相同 (英语有 2 种复数形式，阿拉伯语有 6 种) ，而且用户切换语言时，页面必须重新渲染。

## Video

The video is narrated in English, with English captions.

[How do I translate a Vue app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-vue-app.mp4) (48秒)

General Translation lets you register the `gt-vue` plugin and wrap your template in `T`. List your languages, register the plugin before the app mounts, run `npx gt translate`, and add a switcher built on `useSetLocale`. The `gt-vue` package is a 0.x release whose API may still change.

## 翻译 Vue 应用的几种方式

| 方案                                                                                                      | 擅长之处                                                                                                                                                                                                                                                                                                                                            | 留给你的工作                                                                                                                                                                  |
| ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 仅使用国际化 (i18n) 库 ([`vue-i18n`](/kb/general-translation-vs-vue-i18n))                                     | 通过 `$t` 按键查找消息、原地切换区域设置、选择复数形式，并按区域设置格式化数字和日期                                                                                                                                                                                                                                                                                                   | 为每个字符串设计键、把文本挪到每种语言各自的消息文件中、为俄语等语言编写自定义 `pluralRules`，以及撰写全部译文                                                                                                          |
| `@nuxtjs/i18n` (Nuxt)                                                                                   | 基于 `vue-i18n`，并增加带区域设置前缀的路由、浏览器语言检测、懒加载译文以及 hreflang 标签                                                                                                                                                                                                                                                                                         | 与 `vue-i18n` 相同：键、消息文件和译文仍需自行处理                                                                                                                                         |
| 翻译管理系统 ([Crowdin](/kb/general-translation-vs-crowdin)、[Lokalise](/kb/general-translation-vs-lokalise))  | 提供与你的消息文件同步的网页编辑器，译者可借助词汇表和翻译记忆进行翻译                                                                                                                                                                                                                                                                                                             | 代码中的键和消息文件、同步的初始化设置，以及每次发布前等待译者完成翻译                                                                                                                                     |
| General Translation (`gt-vue` 和 `gt` CLI)                                                               | [`<T>`](/docs/vue/reference/components/t) 原地翻译模板内容，无需键；在 [`<T>`](/docs/vue/reference/components/t) 中使用 [`<Plural>`](/docs/vue/reference/components/plural)，可按 CLDR 规则为每个区域设置选择复数形式；[`npx gt translate`](/docs/cli/reference/commands/translate) 为每种目标语言生成一个目录；[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) 无需重新加载页面即可切换语言 | 用 [`<T>`](/docs/vue/reference/components/t) 包裹模板内容，并完成一次性初始化设置 (配置、加载器和插件) ；源内容变更时重新运行 [`npx gt translate`](/docs/cli/reference/commands/translate)；跟进 0.x 版本之间的 API 变更 |

如果字符串数量少且稳定，或已在消息文件中翻译完毕，单独使用 `vue-i18n` 即可；若 Nuxt 应用需要本地化路由，再加上 `@nuxtjs/i18n`。如果由本地化团队在每次发布时手动翻译，请选择翻译管理系统。如果模板每次发布都有变动，且你希望直接从代码生成译文、无需操心键的同步，请选择 `gt-vue`。

## 使用 gt-vue 翻译 Vue 应用

General Translation 的 `gt-vue` 包以 Vue 插件的形式运行，译文则由 `gt` CLI 生成。

1. 在 `gt.config.json` 中，将源语言设为 `defaultLocale`，将目标语言设为 `locales`，并将目录路径设为 `files.gt.output`。

2. 在挂载应用之前注册 [`createGT()`](/docs/vue/reference/functions/create-gt) 插件。

3. 使用 [`<T>`](/docs/vue/reference/components/t) 组件包裹模板内容。对于独立字符串 (例如输入框的占位符) ，请使用 [`useGT()`](/docs/vue/reference/composables/use-gt) 返回的函数。

   ```vue
   <script setup lang="ts">
   import { T } from 'gt-vue';
   </script>

   <template>
     <T>
       <section>
         <h1>Welcome back</h1>
         <p>Your order is on its way.</p>
       </section>
     </T>
   </template>
   ```

4. 使用 [`npx gt login`](/docs/cli/reference/commands/login) 登录，并设置项目 ID。

5. 运行 [`npx gt translate`](/docs/cli/reference/commands/translate)。该命令会扫描 Vue 源代码，并在 `files.gt.output` 路径下为每种目标语言各生成一个 JSON 目录。

CLI 会提取模板结构，因此文本、嵌套元素和格式会作为一个整体进行翻译。通过 [`<T>`](/docs/vue/reference/components/t) 上的 `context` 属性，可以说明“Open”是动词还是形容词。

## 每次构建时自动翻译

在构建脚本中将 [`npx gt translate`](/docs/cli/reference/commands/translate) 放在 `vite build` 之前，并在构建环境中设置好 `GT_PROJECT_ID` 和 `GT_API_KEY`，这样每次部署都会带上最新的目录。完整步骤请参阅 [Vue 快速入门](/docs/vue/quickstart)，其中包括翻译加载器和语言切换器的配置。

## Related questions

- [如何翻译 React 应用？](https://generaltranslation.com/zh/kb/translate-react-app.mdx): 翻译 React 应用，需要先对组件进行国际化，使其以用户的语言渲染，再将每个字符串翻译成你支持的各种语言。General Translation 的 gt-react 在 `<T>` 组件中原地翻译 JSX，npx gt translate 则会为每种语言生成一个文件。
- [如何为 Next.js App Router 应用添加 i18n？](https://generaltranslation.com/zh/kb/add-i18n-to-nextjs.mdx): 首先在受支持的 App Router 项目中运行 gt init 来配置 General Translation，然后标记源内容、生成译文并验证语言切换。gt-next 将文案与翻译上下文一同保留在 JSX 中；CLI、仪表板编辑器和 Locadex 负责生成、审阅和持续更新。本指南还演示了如何显式配置本地文件。
- [不使用翻译文件能实现 i18n 吗？](https://generaltranslation.com/zh/kb/i18n-without-translation-files.mdx): 可以。借助 General Translation 的 gt-react 和 gt-next 库，你可以为 React 和 Next.js 实现 i18n，既无需翻译键，也不用为每种语言维护 JSON 文件。文案以内联方式写在 JSX 的 `<T>` 组件中，gt translate 命令会在构建时结合代码中的上下文，为每种语言生成译文。Locadex 还能通过拉取请求让译文保持最新。
- [如何在每次部署时保持译文同步更新？](https://generaltranslation.com/zh/kb/translations-in-ci.mdx): 在每次生产环境构建之前，将翻译作为流水线中的一个步骤运行，这样新增文案就会在引入它的那次部署中以翻译好的形式一同上线。General Translation 的 gt CLI 通过 npx gt translate 实现这一点，所需的项目 API 密钥和项目 ID 以 CI 密钥的形式存储。

## Previous and next questions

- Previous question: [如何翻译 React 应用？](https://generaltranslation.com/zh/kb/translate-react-app.mdx)

## Sitemap

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