# vue: 在本地存储翻译
URL: https://generaltranslation.com/zh/docs/vue/guides/storing-translations.mdx
---

title: 在本地存储翻译
description: 如何生成、打包并随应用加载 gt-vue 翻译目录。
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/translating-content

---

`gt-vue` 通过 [`loadTranslations`](/docs/vue/reference/types/load-translations) 回调函数接收目标区域设置的翻译目录。将这些目录生成到源代码树中，以便随应用一起打包，避免依赖运行时翻译服务。

打包后的翻译目录会让翻译更新成为部署流程的一部分。每当源内容或翻译发生更改时，都需要重新生成并部署应用。

## 配置输出路径 [#configure]

将 `gt.config.json` 中 `gt` 的输出路径设置为源目录下的某个路径。`[locale]` 占位符会为每个目标区域设置创建一个文件：

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

默认区域设置无需目录文件，因为应用程序中已包含其源内容。

## 生成目录 [#generate]

添加或修改可翻译内容后，运行 CLI：

```bash
npx gt translate
```

该命令会提取受支持的 [`<T>`](/docs/vue/reference/components/t)、[`useGT()`](/docs/vue/reference/composables/use-gt)、[`msg()`](/docs/vue/reference/functions/msg) 和 [`t()`](/docs/vue/reference/functions/t) 用法，并写入目标区域设置文件。请将这些文件视为生成产物，不要手动编辑。

如果每次部署都需要包含最新的目录，请在生产构建前添加翻译生成步骤：

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && vue-tsc -b && vite build"
  }
}
```

CLI 需要在构建环境中使用 `GT_PROJECT_ID` 和 `GT_API_KEY`。请勿将生产环境密钥打包到浏览器 bundle 中。

## 使用 Vite 加载翻译目录 [#vite]

创建一个 [`loadTranslations`](/docs/vue/reference/types/load-translations) 回调函数，其导入路径与配置的输出路径一致：

```ts title="src/loadTranslations.ts"
import type { LoadTranslations } from 'gt-vue';

const loadTranslations: LoadTranslations = async (locale) => {
  try {
    return (await import(`./_gt/${locale}.json`)).default;
  } catch {
    return {};
  }
};

export default loadTranslations;
```

将其传递给 [`createGT()`](/docs/vue/reference/functions/create-gt) 以进行响应式加载，或传递给 [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) 用于已预加载的纯浏览器 SPA。

上述回调会将缺失的文件视为空目录，因此会渲染该区域设置对应的源内容。如果缺失生产环境目录时应阻止切换区域设置或启动应用，请改为让错误被拒绝。

## 必要时使用显式导入 [#explicit-imports]

某些打包工具无法识别变量导入所引用的所有文件。请定义一个静态加载器映射，以便在构建时让每个目标都可见：

```ts title="src/loadTranslations.ts"
import type { LoadTranslations } from 'gt-vue';

const loaders = {
  es: () => import('./_gt/es.json'),
  fr: () => import('./_gt/fr.json'),
};

const loadTranslations: LoadTranslations = async (locale) => {
  const load = loaders[locale as keyof typeof loaders];
  return load ? (await load()).default : {};
};

export default loadTranslations;
```

使此映射与 `gt.config.json` 中的 `locales` 保持同步。对于有意不支持的区域设置，返回 `{}` 是合适的；拒绝会让调用方明确看到失败。

## 从其他来源加载 [#custom-source]

回调函数可以从您自己的端点获取目录，无需导入打包文件：

```ts
const loadTranslations: LoadTranslations = async (locale) => {
  const response = await fetch(`/translations/${locale}.json`);
  if (!response.ok) throw new Error(`Catalog unavailable for ${locale}`);
  return response.json();
};
```

[`createGT()`](/docs/vue/reference/functions/create-gt) 会在其插件实例的生命周期内缓存每个成功加载的目录，并对并发加载进行去重。请在 endpoint 边界处验证响应；运行时要求为请求的区域设置提供完整的、以 hash 为键的 [`TranslationCatalog`](/docs/vue/reference/types/translation-catalog)。
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/managing-locales
- /docs/vue/guides/translating-content