\n \n

Добро пожаловать в наше приложение

Этот контент переводится автоматически

\n );\n}\n\nexport default App;\n```\n\n## Шаг 6. Сборка и тестирование\n\nЗапустите сервер разработки:\n\n```bash\nnpm run dev\n```\n\nКомпилятор автоматически выполнит:\n\n1. Сканирование ваших React-компонентов на наличие переводимого контента\n2. Извлечение ключей перевода\n3. Генерацию переводов с использованием ИИ\n4. Создание оптимизированных файлов перевода в директории `lingo/`\n\nПерейдите по адресу `http://localhost:5173`, чтобы увидеть ваш многоязычный приложение в действии.\n\n## Настройки конфигурации\n\nВы можете настроить поведение компилятора:\n\n```ts\nexport default defineConfig(() =>\n lingoCompiler.vite({\n sourceRoot: \"src\",\n sourceLocale: \"en\",\n targetLocales: [\"es\", \"fr\", \"de\", \"ja\"],\n lingoDir: \"lingo\",\n debug: false,\n })(viteConfig),\n);\n```\n\n## Возможности для разработки\n\n### Горячая замена модулей (HMR)\n\nКомпилятор поддерживает HMR от Vite для обновлений переводов:\n\n```tsx\n// src/components/Welcome.tsx\nexport function Welcome() {\n return (\n

Добро пожаловать в наше приложение

Измените этот текст, и переводы обновятся автоматически

\n );\n}\n```\n\n### Оптимизация сборки\n\nОптимизация сборки в Vite работает безупречно с компилятором:\n\n- **Разделение кода** включает пакеты переводов\n- **Оптимизация ресурсов** эффективно обрабатывает файлы переводов\n- **Tree shaking** удаляет неиспользуемые переводы\n\n## Пример структуры проекта\n\n```\nmy-vite-app/\n├── src/\n│ ├── components/\n│ │ └── Welcome.tsx\n│ ├── App.tsx\n│ ├── main.tsx\n│ └── lingo/ # Сгенерированные файлы перевода\n│ ├── meta.json\n│ └── dictionary.js\n├── vite.config.ts\n├── package.json\n└── .env\n```\n\n## Развертывание в продакшн\n\n1. **Соберите ваше приложение**:\n\n ```bash\n npm run build\n ```\n\n2. **Закоммитьте файлы перевода**:\n\n ```bash\n git add src/lingo/\n git commit -m \"Добавить переводы\"\n ```\n\n3. **Разверните** на вашей предпочитаемой платформе (Vercel, Netlify и т.д.)\n\nВаше приложение на Vite будет автоматически предоставлять локализованный контент на основе предпочтений пользователя.\n\n## Устранение неполадок\n\n### Распространенные проблемы\n\n**Переводы не генерируются**: Убедитесь, что ваш `GROQ_API_KEY` правильно настроен в файле `.env`.\n\n**Ошибки сборки**: Убедитесь, что директория `lingo/` включена в вашу систему контроля версий.\n\n**HMR не работает**: Перезапустите сервер разработки после добавления нового переводимого контента.\n\n## Следующие шаги\n\n- **Расширенная конфигурация**: [Варианты настройки](../configuration/advanced)\n- **Часто задаваемые вопросы**: [Общие вопросы и устранение неполадок](../guides/faq)\n- **Как это работает**: [Понимание процесса сборки](../how-it-works)\n","content","\n**Компилятор Lingo.dev** интегрируется напрямую с Vite, чтобы обеспечить локализацию на этапе сборки для React-приложений.\n\nСледуйте этим шагам, чтобы добавить поддержку нескольких языков в ваше приложение на Vite + React.\n\nИли изучите [демо-проект Vite](https://github.com/lingodotdev/lingo.dev/tree/main/demo/vite-project), чтобы попробовать компилятор в действии.\n\n## Предварительные требования\n\n- **Vite 4+**\n- **React 18+**\n- Node.js 18 или выше\n\n## Шаг 1. Установите пакет\n\nУстановите пакет **lingo.dev**:\n\n```bash\nnpm install lingo.dev\n```\n\n## Шаг 2. Настройте Vite\n\nИмпортируйте и настройте компилятор в вашем `vite.config.ts`:\n\n```ts\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport lingoCompiler from \"lingo.dev/compiler\";\n\nconst viteConfig = {\n plugins: [react()],\n // Ваши существующие настройки Vite\n};\n\nexport default defineConfig(() =>\n lingoCompiler.vite({\n sourceRoot: \"src\",\n targetLocales: [\"es\", \"fr\", \"de\"],\n models: {\n \"*:*\": \"groq:mistral-saba-24b\",\n },\n })(viteConfig),\n);\n```\n\n## Шаг 3. Настройте аутентификацию\n\n**Lingo.dev Compiler** отправляет ваш контент в AI-движки перевода для локализации, поэтому сначала необходимо пройти аутентификацию.\n\n### Вариант 1. Движок Lingo.dev\n\nLingo.dev Compiler может использовать **Lingo.dev Engine** в качестве вашего AI-движка перевода. Он предоставляет динамический выбор моделей, авто-маршрутизацию, память переводов и поддержку глоссария. Доступны бесплатные и платные варианты.\n\nДля аутентификации выполните команду:\n\n```bash\nnpx lingo.dev@latest login\n```\n\nЕсли у вас возникли проблемы с браузерным процессом, вы можете вручную добавить `LINGODOTDEV_API_KEY` в ваш файл `.env`:\n\n```bash\n\n# .env\n\nLINGODOTDEV_API_KEY=...\n```\n\nВы найдете токен в настройках проекта Lingo.dev Engine.\n\n### Вариант 2. Альтернативный провайдер LLM\n\nКроме того, вы можете использовать модели от поддерживаемых поставщиков LLM:\n\n- [GROQ](https://groq.com/)\n- [Google AI](https://aistudio.google.com/)\n- [OpenRouter](https://openrouter.ai/)\n- [Ollama](https://ollama.com/)\n- [Mistral](http://mistral.ai)\n\nДобавьте ваш(и) API-ключ(и) в файл `.env`:\n\n```bash\n\n# .env\n\nGROQ_API_KEY=gsk_...\nGOOGLE_API_KEY=...\nOPENROUTER_API_KEY=...\nMISTRAL_API_KEY=...\n```\n\n**Примечание:** Убедитесь, что вы активировали свою учетную запись у поставщика LLM и приняли их Условия использования перед началом работы с Compiler.\n\n## Шаг 4. Добавьте провайдера\n\nИмпортируйте провайдера в ваш основной файл (`src/main.tsx`):\n\n```tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App.tsx\";\nimport { LingoProviderWrapper, loadDictionary } from \"lingo.dev/react/client\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n \n loadDictionary(locale)}>\n \n \n ,\n);\n```\n\n## Шаг 5. Опционально: Добавьте переключатель локалей\n\nСоздайте компонент переключателя языков в вашем приложении или заголовке:\n\n```tsx\nimport { LocaleSwitcher } from \"lingo.dev/react/client\";\n\nfunction App() {\n return (\n

\n \n

Добро пожаловать в наше приложение

Этот контент переводится автоматически

Добро пожаловать в наше приложение

Измените этот текст, и переводы обновятся автоматически

Интеграция с Vite