AI 辅助生成代码实操：以 React 项目多语言为例

用 大模型 / IDE 内 AI（如 Cursor、Copilot 等）写代码时，清晰的需求 + 技术栈约束 + 验收标准，比泛泛一句「帮我写个网站」更容易得到可运行、可维护的结果。下面以 Vite + React 接入 react-i18next 实现 中 / 英 切换为例，演示一套可复用的实操流程。

1. 实操目标与原则

2. 第一步：自己建好项目骨架（减少 AI 幻觉）

在终端执行（包管理器任选其一）：

npm create vite@latest my-i18n-app -- --template react-ts
cd my-i18n-app
npm install
npm install i18next react-i18next

先保证 npm run dev 能打开默认页，再让 AI 在已有目录结构上改文件，路径与依赖名更不容易错。

3. 第二步：给 AI 的「任务说明」模板（可直接复制改写）

把下面整段贴给 AI，并附上你的 package.json 里相关依赖行（或说明已安装 react-i18next）：

项目：Vite + React + TypeScript，已安装 i18next、react-i18next。

请在本项目中实现多语言（至少中文 zh、英文 en）：
1. 使用 react-i18next，初始化 i18n（可单独文件 src/i18n.ts）。
2. 语言资源放在 src/locales/zh/common.json 与 src/locales/en/common.json。
3. 在 main.tsx 中在 render 前 import './i18n'。
4. 提供一个语言切换组件（如 LanguageSwitcher），用 i18n.changeLanguage。
5. App 中示例文案用 useTranslation('common')，不要用硬编码中英文两套 JSX。
6. 默认语言可从浏览器语言推断，fallback 为 en。

请给出需要新建/修改的文件完整内容，并说明每个文件作用。

要点：指定文件路径、库名、不要硬编码双份 UI，AI 输出会稳定很多。

4. 第三步：你应检查的关键产出

审阅 AI 给出的内容时，重点看这几处（名称以 AI 输出为准，逻辑一致即可）。

4.1 初始化 src/i18n.ts

• 使用 initReactI18next 与 i18n.init。
• resources 中挂载 zh / en 的命名空间（如 common）。
• lng / fallbackLng、可选 detection（若用了 i18next-browser-languagedetector 需单独安装）。

4.2 入口 main.tsx

• 在 createRoot(...).render 之前 import './i18n'，保证首屏即使用正确语言。

4.3 文案与切换

• 组件内使用 const { t, i18n } = useTranslation('common')，展示 t('some.key')。
• 切换：i18n.changeLanguage('zh')。
• 可选：把当前语言存 localStorage（需在 i18n 配置或切换回调里处理，避免刷新丢失）。

4.4 JSON 结构示例

src/locales/zh/common.json

{
  "app": {
    "title": "多语言示例",
    "switch": "切换语言"
  }
}

src/locales/en/common.json

{
  "app": {
    "title": "i18n Demo",
    "switch": "Switch language"
  }
}

AI 若漏掉某一侧 key，运行时可能显示 key 本身，对照两个 JSON 逐项检查即可。

5. 第四步：验收与迭代

npm run dev
npm run build

• 切换语言后文案是否变化；刷新页面语言是否仍符合预期（若做了持久化）。
• build 无报错；若有路径别名问题，检查 vite.config.ts 与 tsconfig。
• 需要 路由级语言前缀（如 /en/about）时，再单独开一轮对话，说明使用 react-router 版本与期望 URL 规则，避免一次塞太多需求导致半成品。

6. 使用 AI 写代码时的习惯建议

7. 小结

• 实操路径：本地 Vite 建项目 → 安装 i18next 系依赖 → 用结构化提示词让 AI 补全 i18n 初始化、JSON、切换组件 → 本地运行与 build 验收。
• 多语言本质是资源文件 + 统一 t() 取词；AI 适合帮你搭骨架与样板代码，键名一致性与产品文案仍需要你或团队把关。