React与Vue项目国际化（i18n）实战指南

国际化（i18n）是现代Web应用开发中的重要需求，尤其针对全球用户或多语言市场。本文将以React和Vue为例，从原理到实践，详细讲解如何实现项目的国际化，并提供完整代码示例。

一、国际化核心概念

1. 核心目标

多语言文本切换
本地化资源管理（日期/时间/货币/数字格式）
文化差异适配（如RTL布局）

2. 技术选型

React : react-i18next（推荐）或 react-intl
Vue : vue-i18n（官方推荐）

二、React项目国际化实践

1. 安装依赖

bash 复制代码

npm install react-i18next i18next

2. 配置i18next

javascript 复制代码

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import zh from './locales/zh.json';

i18n
  .use(initReactI18next)
  .init({
    resources: { en, zh },
    lng: 'en', // 默认语言
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

3. 创建翻译文件

json 复制代码

// src/locales/en.json
{
  "greeting": "Hello, World!",
  "welcome": "Welcome to the React app"
}

// src/locales/zh.json
{
  "greeting": "你好，世界！",
  "welcome": "欢迎使用React应用"
}

4. 在组件中使用翻译

javascript 复制代码

// src/App.js
import React from 'react';
import { useTranslation } from 'react-i18next';
import './i18n';

function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <div>
      <h1>{t('greeting')}</h1>
      <p>{t('welcome')}</p>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

export default App;

5. 高级功能

动态加载语言包（优化性能）

javascript 复制代码

// i18n.js
i18n
  .use(initReactI18next)
  .init({
    backend: { loadPath: '/locales/{{lng}}.json' }, // 按需加载
  });

本地化日期/货币

javascript 复制代码

// 使用Intl API配合i18n语言
const currentDate = new Date();
const formattedDate = new Intl.DateTimeFormat(i18n.language).format(currentDate);

三、Vue项目国际化实践

1. 安装依赖

bash 复制代码

npm install vue-i18n

2. 配置vue-i18n

javascript 复制代码

// src/i18n/index.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import en from './locales/en.json';
import zh from './locales/zh.json';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en',
  messages: { en, zh },
});

export default i18n;

3. 创建翻译文件

json 复制代码

// src/locales/en.json
{
  "greeting": "Hello, Vue!",
  "welcome": "Welcome to the Vue app"
}

// src/locales/zh.json
{
  "greeting": "你好，Vue！",
  "welcome": "欢迎使用Vue应用"
}

4. 在组件中使用翻译

html 复制代码

<!-- src/App.vue -->
<template>
  <div>
    <h1>{{ $t('greeting') }}</h1>
    <p>{{ $t('welcome') }}</p>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    },
  },
};
</script>

5. 高级功能

异步加载语言包

javascript 复制代码

// 动态导入语言包
async loadLanguage(lang) {
  const msg = await import(`./locales/${lang}.json`);
  this.$i18n.setLocaleMessage(lang, msg.default);
}

本地化日期/货币

html 复制代码

<!-- 使用vue-i18n的date和number格式化 -->
<p>{{ $d(new Date(), 'short') }}</p>
<p>{{ $n(1234.56, 'currency') }}</p>

四、代码完整性与性能优化

1. React代码完整性

bash 复制代码

# 安装依赖
npm install react-i18next i18next

# 文件结构
src/
├── i18n.js
├── locales/
│   ├── en.json
│   └── zh.json
└── App.js

2. Vue代码完整性

bash 复制代码

# 安装依赖
npm install vue-i18n

# 文件结构
src/
├── i18n/
│   ├── index.js
│   └── locales/
│       ├── en.json
│       └── zh.json
└── App.vue

3. 性能优化

React : 使用Suspense懒加载语言包，避免一次性加载所有资源。
Vue : 通过vue-i18n的backend配置实现CDN加速或动态加载。

五、总结与对比

特性	React (react-i18next)	Vue (vue-i18n)
核心库	react-i18next	vue-i18n
语言切换	`i18n.changeLanguage()`	`this.$i18n.locale = 'en'`
动态加载	后端加载(`backend.loadPath`)	动态导入(`import()`)
日期/数字格式化	需配合`Intl` API	内置`$d`和`$n`方法
RTL支持	手动设置`dir`属性	自动通过`locale`判断

通过以上实践，React和Vue项目均可轻松实现国际化。选择技术方案时，需根据项目规模、性能需求和团队熟悉度综合考虑。完整代码已托管至GitHub，可直接运行验证效果。