# Vue: Конфигурация
URL: https://generaltranslation.com/ru/docs/vue/reference/config.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Настройка генерации каталогов и инициализации среды выполнения для приложения Vue. Справочник по конфигурации Vue.

У конфигурации есть два независимых потребителя. CLI `gt` читает `gt.config.json`, чтобы находить исходный контент и записывать каталоги, а ваше приложение передаёт параметры среды выполнения в [`createGT()`](/docs/vue/reference/functions/create-gt) или [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa).

`gt-vue` не находит и не читает `gt.config.json` автоматически. Явно импортируйте общие значения и передавайте такие функции, как [`loadTranslations`](/docs/vue/reference/types/load-translations), в коде приложения.

## Обзор [#overview]

| Компонент                                                              | Назначение                                                                                                                               | Конфигурация                                                                                              |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `gt.config.json`                                                       | Извлекает исходный контент и создаёт каталоги переводов.                                                                                 | Сериализуемые в JSON поля CLI: `projectId`, `defaultLocale`, `locales`, `src`, `files` и `customMapping`. |
| [`createGT()`](/docs/vue/reference/functions/create-gt)                | Создаёт изолированный плагин для реактивного рендеринга на клиенте или серверного рендеринга в рамках запроса.                           | [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options)                                          |
| [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Создаёт и предварительно загружает глобальный плагин браузера, используемый модульной функцией [`t()`](/docs/vue/reference/functions/t). | [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options)                           |

Поля `projectId`, `src` и `files`, доступные только в CLI, игнорируются средой выполнения. Поля `locale`, `localeCookieName` и `loadTranslations`, доступные только в среде выполнения, невозможно полностью представить в JSON. `defaultLocale` и `customMapping` используются всеми компонентами, а `locales` принимается инициализатором SPA.

## `gt.config.json` [#config-file]

Поместите `gt.config.json` в корневой каталог проекта. Эта конфигурация Vue сканирует явно указанные glob-шаблоны исходных файлов и записывает отдельный каталог для каждой целевой локали:

```json title="gt.config.json"
{
  "$schema": "https://assets.gtx.dev/config-schema.json",
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "src": ["src/**/*.{vue,js,jsx,mjs,cjs,ts,tsx,mts,cts}"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

Записи `src` — это glob-шаблоны. Сам по себе каталог, например `"src"`, не задаёт рекурсивный поиск файлов; укажите файлы и расширения, которые должен сканировать CLI. Если `src` не указан, настройки Vue по умолчанию охватывают корневые однофайловые компоненты и стандартные каталоги Vue и Nuxt.

| Поле                                                         | Использование Vue                                                      | Использование среды выполнения                                                                                                                                                                                                                                                                                                                    |
| ------------------------------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `$schema`                                                    | Добавляет проверку и автодополнение в редакторе.                       | Нет                                                                                                                                                                                                                                                                                                                                               |
| `projectId`                                                  | Выбирает проект General Translation, используемый CLI.                 | Нет                                                                                                                                                                                                                                                                                                                                               |
| [`defaultLocale`](/docs/cli/reference/config#default-locale) | Объявляет исходную локаль.                                             | Передайте в любой из инициализаторов среды выполнения.                                                                                                                                                                                                                                                                                            |
| [`locales`](/docs/cli/reference/config#locales)              | Объявляет целевые локали, создаваемые CLI.                             | Передайте в [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa), чтобы отклонять неподдерживаемые сохранённые или запрошенные локали. Плагин [`createGT()`](/docs/vue/reference/functions/create-gt) не ограничивает коды локалей.                                                                                             |
| [`src`](/docs/cli/reference/config#src)                      | Выбирает исходные файлы Vue, JavaScript и TypeScript для извлечения.   | Нет                                                                                                                                                                                                                                                                                                                                               |
| [`files.gt.output`](/docs/cli/reference/config#files)        | Задаёт путь к создаваемому каталогу. Сохраните placeholder `[locale]`. | Настройте загрузчик на импорт из того же каталога.                                                                                                                                                                                                                                                                                                |
| [`customMapping`](/docs/cli/reference/config#custom-mapping) | Применяет алиасы локалей при генерации переводов.                      | Передайте в любую из сред выполнения. [`createGT()`](/docs/vue/reference/functions/create-gt) использует сопоставления объектов с допустимым `code` для форматирования и правил множественного числа; [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) дополнительно применяет их для сопоставления поддерживаемых локалей. |

Полный список полей проекта, файлов, публикации, проверки и веток см. в [справочнике конфигурации CLI](/docs/cli/reference/config). Храните `GT_API_KEY` в окружении CLI; не помещайте учётные данные Production в `gt.config.json` или код браузера.

## Извлечение Vue [#vue-extraction]

Настройки компилятора шаблонов Vue влияют на извлекаемое содержимое и его translation hash. По умолчанию extractor определяет эти настройки из активной конфигурации Vite или Nuxt. Задавайте их явно, если автоматическое определение неоднозначно или в вашем приложении используются нестандартные значения:

| Option                                                | Description                                                          | Type                       | Optional | Default                                                 |
| ----------------------------------------------------- | -------------------------------------------------------------------- | -------------------------- | -------- | ------------------------------------------------------- |
| `files.gt.parsingFlags.vueCompilerOptions.whitespace` | Соответствует обработке пробелов в шаблонах Vue.                     | `'condense' \| 'preserve'` | Да       | Обнаруженная настройка, затем значение Vue по умолчанию |
| `files.gt.parsingFlags.vueCompilerOptions.delimiters` | Соответствует пользовательским разделителям интерполяции в шаблонах. | `[string, string]`         | Да       | Обнаруженная настройка, затем `['{{', '}}']`            |
| `files.gt.parsingFlags.viteConfigPath`                | Выбирает одну конфигурацию Vite относительно корневого каталога проекта.           | `string`                   | Да       | Автоматическое определение                              |

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "parsingFlags": {
        "vueCompilerOptions": {
          "whitespace": "preserve",
          "delimiters": ["${", "}"]
        },
        "viteConfigPath": "config/vite.app.ts"
      }
    }
  }
}
```

Эти значения должны совпадать со значениями компилятора приложения. Изменение пробелов или разделителей может изменить исходный контент и сделать существующие translation hash недействительными.

Для алиасов путей TypeScript или JavaScript передайте файл конфигурации в CLI:

```bash
npx gt translate --tsconfig config/tsconfig.app.json
```

`--tsconfig` и его алиас `--jsconfig` — это параметры командной строки, а не поля в `gt.config.json`. Если они не указаны, при извлечении находится ближайший доступный конфиг.

## Параметры среды выполнения [#runtime-options]

| Параметр           | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | По умолчанию                                |
| ------------------ | ------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------- |
| `defaultLocale`    | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | `en`                                        |
| `loadTranslations` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Пустой каталог                              |
| `locale`           | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | cookie-файл браузера, затем `defaultLocale` |
| `localeCookieName` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | `generaltranslation.locale`                 |
| `locales`          | Нет                                                     | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Без ограничений                             |
| `customMapping`    | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Нет                                         |

Полные спецификации параметров приведены в [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) и [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options). Можно передавать `{ ...gtConfig, loadTranslations }` инициализатору SPA: в среде выполнения он использует общие поля и игнорирует остальные поля CLI.

## Загрузка каталога [#catalog-loading]

Пути вывода и загрузчика должны указывать на одни и те же файлы:

```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) ожидает завершения начальной загрузки перед возвратом.

## Реактивная настройка [#reactive-setup]

Для обычного клиентского приложения используйте [`createGT()`](/docs/vue/reference/functions/create-gt). Явно передайте поля среды выполнения, поскольку `locales`, `src` и `files` не входят в [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options):

```ts title="src/main.ts"
import { createApp } from 'vue';
import { createGT } from 'gt-vue';
import App from './App.vue';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

const gt = createGT({
  defaultLocale: gtConfig.defaultLocale,
  loadTranslations,
});

createApp(App).use(gt).mount('#app');
```

При серверном рендеринге создавайте новый плагин для каждого запроса, явно указывайте локаль запроса и предварительно загружайте её перед рендерингом:

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

export async function createRequestGT(locale: string) {
  const gt = createGT({ defaultLocale: 'en', locale, loadTranslations });
  await gt.loadTranslations(locale);
  return gt;
}
```

Перед гидратацией клиента используйте ту же явно указанную локаль и предварительно загруженный каталог. Общий серверный плагин может привести к утечке состояния локали и каталога между запросами.

## Браузерное одностраничное приложение [#browser-spa]

Используйте [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) только в одностраничном приложении, работающем исключительно в браузере и вызывающем [`t()`](/docs/vue/reference/functions/t) на уровне модуля. Дождитесь завершения инициализации перед динамическим импортом модулей приложения, затем установите именно возвращённый плагин:

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-vue';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

async function bootstrap() {
  const gt = await initializeGTSPA({ ...gtConfig, loadTranslations });
  const { mount } = await import('./main');
  mount(gt);
}

void bootstrap().catch((error: unknown) => {
  console.error(error);
});
```

Первый вызов управляет средой выполнения всей страницы. При изменении локали обновляется cookie-файл и перезагружается документ, благодаря чему переводы на уровне модуля выполняются заново с вновь предзагруженным каталогом. Чтобы реактивно изменять локаль без перезагрузки, используйте [`createGT()`](/docs/vue/reference/functions/create-gt) и переводите строки компонентов с помощью [`useGT()`](/docs/vue/reference/composables/use-gt).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.