\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. 生成 AI 驱动的翻译\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### 热模块替换\n\n编译器支持 Vite 的 HMR 功能以更新翻译：\n\n```tsx\n// src/components/Welcome.tsx\nexport function Welcome() {\n return (\n

欢迎使用我们的应用

编辑此文本并查看翻译自动更新

\n );\n}\n```\n\n### 构建优化\n\nVite 的构建优化与编译器无缝协作：\n\n- **代码分割** 包括翻译包\n- **资源优化** 高效处理翻译文件\n- **树摇优化** 移除未使用的翻译内容\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**翻译未生成**：确保您的 `.env` 文件中正确设置了 `GROQ_API_KEY`。\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 编译器**会将您的内容发送到 AI 翻译引擎进行本地化，因此您需要先进行身份验证。\n\n### 选项 1：Lingo.dev 引擎\n\nLingo.dev 编译器可以使用 **Lingo.dev 引擎**作为您的 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 引擎项目设置中找到该令牌。\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\n将您的 API 密钥添加到 `.env` 文件中：\n\n```bash\n\n# .env\n\nGROQ_API_KEY=gsk_...\nGOOGLE_API_KEY=...\nOPENROUTER_API_KEY=...\n```\n\n**注意：** 在 Compiler 中使用之前，请确保已激活您的 LLM 提供商账户并接受其服务条款。\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在您的 App 或 Header 中创建一个语言切换器组件：\n\n```tsx\nimport { LocaleSwitcher } from \"lingo.dev/react/client\";\n\nfunction App() {\n return (\n

\n \n

欢迎使用我们的应用

此内容是自动翻译的

欢迎使用我们的应用

编辑此文本并查看翻译自动更新

Vite 集成