@intlayer/docs 9.4.4 → 9.5.1

package/blog/zh/transform_existing_vite_react_app_using_compiler.md

@@ -0,0 +1,358 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2026-09-06
+title: "如何在事后为现有 Vite 和 React 应用程序实现多语言（i18n 指南 2026）"
+description: "2026 年现有 Vite 与 React 应用的多语言 (i18n) 改造指南。无需繁琐重构，借助 Intlayer 体验自动内容提取、AI 翻译与极致打包优化。"
+keywords:
+  - Vite i18n
+  - React i18n
+  - 国际化
+  - 翻译现有 Vite 应用
+  - 翻译现有 React 应用
+  - Intlayer
+  - 多语言
+  - 编译器
+  - AI 翻译
+  - SEO
+slugs:
+  - blog
+  - transform-existing-react-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+applicationShowcase: https://intlayer-vite-react-template.vercel.app
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# 如何在事后为现有 Vite 和 React 应用程序实现多语言（i18n 指南 2026）
+
+从项目第一天起就为 Vite 和 React 添加国际化 (i18n) 相对轻松。但如果您的单语言应用程序已经上线成熟，事后需要将其改造成多语言应用，该如何处理？
+
+使用传统库（如 `react-i18next` 或 `react-intl`）往往是一场噩梦：
+
+- 在数百个 JSX 和 TSX 文件中手动搜索硬编码的文本字符串。
+- 手动创建嵌套的 JSON 字典并编造任意翻译键名（如 `components.header.title` 等）。
+- 用繁杂冗长的 hook（如 `t('...')`）替换原有文字。
+- 重新设计客户端路由、状态管理以及语言切换逻辑。
+
+在 2026 年，您不再需要大动干戈重写代码。借助 **Intlayer**，您可以通过自动化提取、AI 翻译与原生 Vite 集成，在数分钟内为现有应用无缝接入国际化。
+
+> 需要查看针对 Vite 和 React 的完整详细分步技术指南？请查阅我们的专属文档：[使用 Intlayer 翻译 Vite 和 React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+react.md)。
+
+## 目录
+
+<TOC/>
+
+## 改造难题：为什么现有应用实现国际化如此痛苦？
+
+对现有 Vite 和 React 应用程序进行国际化改造时，开发者常面临三大障碍：
+
+1. **代码结构破坏**：手动将字符串提取到 JSON 字典需要修改几乎每个组件文件，产生海量 Git diff、潜在的代码冲突以及视图回归风险。
+2. **键名维护成本高昂**：为每一段文字凭空编造如 `dashboard.hero.ctaButton` 的键名不仅拖慢开发进度，每次修改文案还会增加心智负担。
+3. **繁重的翻译劳动**：一旦字符串提取完毕，将其翻译成 5、10 或 20 种语言需要无数次复制粘贴，或者依赖昂贵的外部本地化服务。
+
+Intlayer 通过**编译器辅助提取**、**组件级声明式字典**以及与 **Vite 的无缝集成**，从架构层面彻底解决了这些痛点。
+
+## 自动化内容提取（告别手动搜寻字符串）
+
+无需手动逐一从 JSX 中提取硬编码文本，Intlayer 提供了两种无痛方案：
+
+### 方案 A：CLI 提取工具 (`npx intlayer extract`)
+
+您可以直接在代码库中运行 Intlayer 的提取命令：
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+该命令解析您的 React 组件，提取可见的文本内容，并在各组件同级目录下自动创建内容声明文件 (`.content.ts`)。组件逻辑依然保持声明式、直观且完全类型安全，无需手写任何翻译键。
+
+### 方案 B：Intlayer 编译器（编译时提取）
+
+在配置中启用 Intlayer 编译器后，您只需照常在默认语言中使用普通文本编写组件。构建时，编译器会自动提取文本并注入本地化内容：
+
+```tsx fileName="src/App.tsx"
+// 编写常规 React 代码，编译器会在构建时自动提取文本
+export default function App() {
+  return (
+    <section>
+      <h1>欢迎来到我们的平台</h1>
+      <p>立即开始探索现代化的强大功能。</p>
+    </section>
+  );
+}
+```
+
+在底层，Intlayer 会构建字典并自动将组件与本地化内容关联，彻底省去手动重构步骤。
+
+此时会生成一个具有如下结构的 `src/App.content.ts` 声明文件：
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    huanyingLadaoWomenDePingtai: t({
+      zh: "欢迎来到我们的平台",
+    }),
+    lijiKaishiTansuoXiandaihua: t({
+      zh: "立即开始探索现代化的强大功能。",
+    }),
+  },
+};
+
+export default content;
+```
+
+## 利用您喜爱的 LLM 进行 AI 自动化翻译
+
+提取完内容后，将其翻译为数十种语言无需耗费数天。Intlayer 内置了强大的 AI 翻译 CLI 工具，可直接通过您自己的 API 密钥连接 OpenAI、Anthropic、DeepSeek 或 Mistral：
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+在 `intlayer.config.ts` 中配置所需语言和 AI 模型：
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      Locales.CHINESE,
+    ],
+    defaultLocale: Locales.CHINESE,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "基于 Vite 和 React 构建的现代化 SaaS 应用与管理后台仪表盘",
+  },
+};
+
+export default config;
+```
+
+运行 `npx intlayer fill` 即可为所有配置的语言填充高质量翻译：
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    huanyingLadaoWomenDePingtai: t({
+      zh: "欢迎来到我们的平台",
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+    }),
+    lijiKaishiTansuoXiandaihua: t({
+      zh: "立即开始探索现代化的强大功能。",
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+    }),
+  },
+};
+
+export default content;
+```
+
+由于 Intlayer 会将高级业务上下文 (`applicationContext`) 提供给大语言模型，生成的译文能够更好地契合技术语境、品牌口吻和语法细节。
+
+在上线前快速检查是否存在遗漏的翻译：
+
+```bash
+npx intlayer test
+```
+
+## Vite 集成与 Provider 配置
+
+在 Vite 中集成 Intlayer 非常轻量，只需在 `vite.config.ts` 中添加插件并在根组件中包裹 `IntlayerProvider`：
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> 自 Intlayer v9 起，编译器已直接内置在 `intlayer()` 插件中，一旦在 `intlayer.config.ts` 中启用 `compiler.enabled` 即可自动激活。
+
+在根组件中使用 `IntlayerProvider` 包裹您的应用：
+
+```tsx fileName="src/App.tsx"
+import { FC } from "react";
+import { IntlayerProvider } from "react-intlayer";
+import { MainContent } from "./MainContent";
+
+const App: FC = () => {
+  return (
+    <IntlayerProvider>
+      <MainContent />
+    </IntlayerProvider>
+  );
+};
+
+export default App;
+```
+
+### 动态切换语言
+
+在应用的任意位置使用 `useLocale` hook 轻松实现语言切换：
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => setLocale(e.target.value as Locales)}
+    >
+      {availableLocales.map((loc) => (
+        <option key={loc} value={loc}>
+          {loc}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## 多语言 SEO（Sitemap 与 Robots.txt）
+
+Intlayer 提供了诸如 `generateSitemap` 和 `getMultilingualUrls` 等格式化工具，方便在 Vite 静态部署中生成对爬虫友好的多语言 `sitemap.xml` 和 `robots.txt` 文件：
+
+```javascript fileName="generate-seo.mjs"
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { generateSitemap, getMultilingualUrls } from "intlayer";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SITE_URL = (process.env.SITE_URL || "https://example.com").replace(
+  /\/$/,
+  ""
+);
+
+const pathList = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
+
+const getAllMultilingualUrls = (urls) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+const robotsTxt = [
+  "User-agent: *",
+  "Allow: /",
+  ...disallowedPaths.map((path) => `Disallow: ${path}`),
+  "",
+  `Sitemap: ${SITE_URL}/sitemap.xml`,
+].join("\n");
+
+fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
+console.log("SEO 文件生成完毕。");
+```
+
+在 `package.json` 中配置 `prebuild` 钩子以便在 `vite build` 之前自动执行：
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+## 深入探索：准备好进行完整的分步实践了吗？
+
+本指南为您提供了在 2026 年对现有 Vite 和 React 应用进行国际化改造的高层概念与方案。
+
+如果您准备按步骤深入配置所有细节（包括严谨的 TypeScript 类型安全支持、动态字典与可视化编辑器），欢迎查阅我们的完整指南：
+
+👉 **[使用 Intlayer 翻译 Vite 和 React 的完整指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+react.md)**
+
+## 常见问题解答 (FAQ)
+
+<FAQ>
+
+<Question title="能否在不手动重构全部字符串的情况下实现 Vite 和 React 的多语言化？">
+
+可以。您可以运行 `npx intlayer extract` 自动检测并提取硬编码字符串至本地化内容声明文件中，也可以使用 Intlayer 编译器在构建期间完成组件转换，日常开发依然书写标准 JSX。
+
+</Question>
+<Question title="相比 react-i18next 或 react-intl，Intlayer 如何减小 Vite 的打包体积？">
+
+Intlayer 采用单组件字典声明并在构建期进行宏优化。打包产物仅包含页面渲染所必需的文案字段，无需加载巨大的命名空间 JSON 文件。动态字典机制还能按需懒加载语言包。
+
+</Question>
+<Question title="我可以使用 AI 自动将现有组件翻译成多种语言吗？">
+
+可以。Intlayer CLI 提供了 `npx intlayer fill` 命令，可连接您偏好的主流 AI 提供商（OpenAI、Anthropic、Mistral、DeepSeek），自动为所有配置的目标语言生成精准且具语境感知能力的翻译。
+
+</Question>
+<Question title="是否可以在不重写组件代码的前提下从 react-i18next 或 react-intl 迁移？">
+
+可以。Intlayer 提供了面向 `react-i18next` 和 `react-intl` 的兼容适配器，并提供用于双向同步既有 JSON 翻译文件的插件 (`sync-json`)。
+
+</Question>
+
+</FAQ>

package/blog/zh/vue-i18n_vs_intlayer.md

@@ -33,15 +33,11 @@ author: aymericzip
 
 > **简而言之**：两者都能实现 Vue 应用的本地化。如果你需要**组件范围的内容**、**严格的 TypeScript 类型**、**构建时缺失键检查**、**支持 Tree-shaking 的字典**，以及**内置的路由/SEO 辅助工具**，再加上**可视化编辑器和 AI 翻译**，那么 **Intlayer** 是更完整、更现代的选择。
 
----
-
 ## 高层定位
 
 - **vue-i18n** - Vue 的事实标准国际化库。支持灵活的消息格式（ICU 风格）、单文件组件（SFC）中的 `<i18n>` 块用于本地消息，并拥有庞大的生态系统。安全性和大规模维护主要依赖开发者自身。
 - **Intlayer** - 面向组件的内容模型，适用于 Vue/Vite/Nuxt，具备**严格的 TypeScript 类型检查**、**构建时校验**、**摇树优化**、**路由和 SEO 辅助工具**，可选的**可视化编辑器/CMS**，以及**AI 辅助翻译**。
 
----
-
 ## 并列功能对比（Vue 重点）
 
 | 功能                                         | **Intlayer**                                                           | **vue-i18n**                                             |
@@ -65,8 +61,6 @@ author: aymericzip
 | **大型项目可维护性**                         | ✅ 鼓励模块化、设计系统友好的结构                                      | ✅ 可行，但需要严格的文件/命名空间管理                   |
 | **生态系统 / 社区**                          | ⚠️ 较小但增长迅速                                                      | ✅ Vue 生态系统中庞大且成熟                              |
 
----
-
 ## 深度比较
 
 ### 1) 架构与可扩展性
@@ -76,8 +70,6 @@ author: aymericzip
 
 **重要原因：** 在大型 Vue 应用或设计系统中，**模块化内容**比单体目录更易于扩展。
 
----
-
 ### 2) TypeScript 与安全性
 
 - **vue-i18n**：良好的 TS 支持；**严格键类型**通常需要自定义模式/泛型和谨慎的约定。
@@ -85,8 +77,6 @@ author: aymericzip
 
 **重要性说明：** 强类型可以在**运行前**捕获问题。
 
----
-
 ### 3) 缺失翻译处理
 
 - **vue-i18n**：**运行时**警告/回退（例如，回退到默认语言或键）。
@@ -94,8 +84,6 @@ author: aymericzip
 
 **重要性说明：** 构建时强制执行确保生产环境界面干净且一致。
 
----
-
 ### 4) 路由与 URL 策略（Vue Router/Nuxt）
 
 - **两者**都支持本地化路由。
@@ -103,8 +91,6 @@ author: aymericzip
 
 **重要性：** 减少自定义粘合层，实现跨语言环境的 **更清晰的 SEO**。
 
----
-
 ### 5) 性能与加载行为
 
 - **vue-i18n**：支持异步加载语言消息；避免过度打包需要你自行管理（需谨慎拆分目录）。
@@ -112,8 +98,6 @@ author: aymericzip
 
 **重要性：** 更小的包体积和更快的多语言 Vue 应用启动速度。
 
----
-
 ### 6) 开发者体验与工具链
 
 - **vue-i18n**：成熟的文档和社区；您通常会依赖**外部本地化平台**来进行编辑工作流程。
@@ -121,8 +105,6 @@ author: aymericzip
 
 **重要原因：** 降低运维成本，缩短开发与内容的循环时间。
 
----
-
 ### 7) SEO、SSR 与 SSG
 
 - **两者**均支持 Vue SSR 和 Nuxt。
@@ -130,8 +112,6 @@ author: aymericzip
 
 **重要原因：** 实现国际化 SEO，无需定制复杂配置。
 
----
-
 ## 为什么选择 Intlayer？（问题与方法）
 
 大多数 i18n 方案（包括 **vue-i18n**）都从**集中式目录**开始：
@@ -222,8 +202,6 @@ const { greeting } = useIntlayer("component-example");
 - **避免死键**（未使用的组件不导入内容）。
 - **优化加载**（懒加载组件携带其内容）。
 
----
-
 ## Intlayer 的额外功能（与 Vue 相关）
 
 - **跨框架支持**：支持 Vue、Nuxt、Vite、React、Express 等。
@@ -241,15 +219,11 @@ const { greeting } = useIntlayer("component-example");
 - **MCP服务器和VSCode扩展**：在您的IDE中自动化i18n工作流和内容创作。
 - **互操作性**：在需要时与**vue-i18n**、**react-i18next**和**react-intl**桥接。
 
----
-
 ## 何时选择哪一个？
 
 - 如果您想要**标准的Vue方案**，并且能够自行管理目录/命名空间，且您的应用是**小型到中型**（或者您已经依赖Nuxt i18n），请选择**vue-i18n**。
 - 如果您重视**组件范围的内容**、**严格的TypeScript**、**构建时保证**、**摇树优化**以及**内置的路由/SEO/编辑工具**，尤其是针对**大型、模块化的Vue/Nuxt代码库**，请选择**Intlayer**。
 
----
-
 ## 实用迁移注意事项（vue-i18n → Intlayer）
 
 - **按功能开始**：一次将一个路由/视图/组件迁移到本地 Intlayer 字典。
@@ -258,16 +232,12 @@ const { greeting } = useIntlayer("component-example");
 - **采用路由/SEO 辅助工具**：标准化语言环境检测和 `hreflang` 标签。
 - **测量包大小**：随着未使用内容被排除，预计**包大小会减少**。
 
----
-
 ## GitHub Stars
 
 GitHub stars 是项目受欢迎程度、社区信任度和长期相关性的强有力指标。虽然不是技术质量的直接衡量标准，但它们反映了有多少开发者认为该项目有用、关注其进展，以及可能会采用它。对于估计项目的价值，stars 有助于在各种方案之间进行性能对比，并提供生态系统增长的见解。
 
 [![Star History Chart](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
----
-
 ## 结论
 
 **vue-i18n** 和 **Intlayer** 都能很好地本地化 Vue 应用。区别在于你需要自己构建多少内容，才能实现一个健壮且可扩展的方案：

package/blog/zh/what_is_internationalization.md

@@ -101,8 +101,6 @@ author: aymericzip
 - **文化敏感性**  
   图标、颜色和符号在不同文化之间可能具有不同的含义。重要的是调整视觉和文本内容以尊重当地文化细微差别。
 
----
-
 ## 实施国际化的最佳实践
 
 - **提前规划**  
@@ -117,8 +115,6 @@ author: aymericzip
 - **翻译重用性**  
   组织翻译文件，使其能够在多个网站或应用程序中重用。例如，如果您有一个多语言的页脚或页头，设置专用翻译文件，以便通用元素可以轻松应用于所有项目。
 
----
-
 ## 本地内容声明与CMS内容外部化
 
 在创建网站时，像WordPress、Wix或Drupal这样的**内容管理系统（CMS）通常提供更好的可维护性**。尤其对于博客或落地页，因为它们集成了国际化功能。
@@ -136,8 +132,6 @@ author: aymericzip
 
 选择合适的工具以满足您的需求并从一开始规划您的国际化策略至关重要。**Intlayer通过结合区域内容声明与紧密集成的无头CMS提供了一个引人注目的解决方案，提供了两者的最佳组合。**
 
----
-
 ### 按技术查看国际化库和工具列表
 
 如果您希望查看按技术划分的国际化库和工具列表，请查看以下资源：
@@ -155,8 +149,6 @@ author: aymericzip
 - Svelte: [查看国际化库和工具列表](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/list_i18n_technologies/frameworks/svelte.md)
 - React Native: [查看国际化库和工具列表](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## 结论
 
 国际化 (i18n) 不仅仅是一个技术任务；它是一个**战略投资**，使您的软件能够“说”用户的语言, 字面上。通过抽象掉特定于区域的元素，适应语言和文化的变化，并为未来的扩展做好规划，您能够让您的产品在全球市场中蓬勃发展。

package/dist/cjs/generated/blog.entry.cjs

@@ -894,6 +894,46 @@ const blogEntry = {
 		vi: readLocale("react-i18next_vs_react-intl_vs_intlayer.md", "vi"),
 		uk: readLocale("react-i18next_vs_react-intl_vs_intlayer.md", "uk")
 	},
+	"./blog/en/transform_existing_nextjs_app_using_compiler.md": {
+		en: readLocale("transform_existing_nextjs_app_using_compiler.md", "en"),
+		es: readLocale("transform_existing_nextjs_app_using_compiler.md", "es"),
+		ru: readLocale("transform_existing_nextjs_app_using_compiler.md", "ru"),
+		ja: readLocale("transform_existing_nextjs_app_using_compiler.md", "ja"),
+		fr: readLocale("transform_existing_nextjs_app_using_compiler.md", "fr"),
+		ko: readLocale("transform_existing_nextjs_app_using_compiler.md", "ko"),
+		zh: readLocale("transform_existing_nextjs_app_using_compiler.md", "zh"),
+		de: readLocale("transform_existing_nextjs_app_using_compiler.md", "de"),
+		ar: readLocale("transform_existing_nextjs_app_using_compiler.md", "ar"),
+		it: readLocale("transform_existing_nextjs_app_using_compiler.md", "it"),
+		"en-GB": readLocale("transform_existing_nextjs_app_using_compiler.md", "en-GB"),
+		pt: readLocale("transform_existing_nextjs_app_using_compiler.md", "pt"),
+		hi: readLocale("transform_existing_nextjs_app_using_compiler.md", "hi"),
+		tr: readLocale("transform_existing_nextjs_app_using_compiler.md", "tr"),
+		pl: readLocale("transform_existing_nextjs_app_using_compiler.md", "pl"),
+		id: readLocale("transform_existing_nextjs_app_using_compiler.md", "id"),
+		vi: readLocale("transform_existing_nextjs_app_using_compiler.md", "vi"),
+		uk: readLocale("transform_existing_nextjs_app_using_compiler.md", "uk")
+	},
+	"./blog/en/transform_existing_vite_react_app_using_compiler.md": {
+		en: readLocale("transform_existing_vite_react_app_using_compiler.md", "en"),
+		es: readLocale("transform_existing_vite_react_app_using_compiler.md", "es"),
+		ru: readLocale("transform_existing_vite_react_app_using_compiler.md", "ru"),
+		ja: readLocale("transform_existing_vite_react_app_using_compiler.md", "ja"),
+		fr: readLocale("transform_existing_vite_react_app_using_compiler.md", "fr"),
+		ko: readLocale("transform_existing_vite_react_app_using_compiler.md", "ko"),
+		zh: readLocale("transform_existing_vite_react_app_using_compiler.md", "zh"),
+		de: readLocale("transform_existing_vite_react_app_using_compiler.md", "de"),
+		ar: readLocale("transform_existing_vite_react_app_using_compiler.md", "ar"),
+		it: readLocale("transform_existing_vite_react_app_using_compiler.md", "it"),
+		"en-GB": readLocale("transform_existing_vite_react_app_using_compiler.md", "en-GB"),
+		pt: readLocale("transform_existing_vite_react_app_using_compiler.md", "pt"),
+		hi: readLocale("transform_existing_vite_react_app_using_compiler.md", "hi"),
+		tr: readLocale("transform_existing_vite_react_app_using_compiler.md", "tr"),
+		pl: readLocale("transform_existing_vite_react_app_using_compiler.md", "pl"),
+		id: readLocale("transform_existing_vite_react_app_using_compiler.md", "id"),
+		vi: readLocale("transform_existing_vite_react_app_using_compiler.md", "vi"),
+		uk: readLocale("transform_existing_vite_react_app_using_compiler.md", "uk")
+	},
 	"./blog/en/vue-i18n_vs_intlayer.md": {
 		en: readLocale("vue-i18n_vs_intlayer.md", "en"),
 		es: readLocale("vue-i18n_vs_intlayer.md", "es"),