全面解析 i18n：从概念到实践，再到底层原理

// en.json
{ "greeting": "Hello World" }

// zh-CN.json
{ "greeting": "你好，世界" }

// fr.json
{ "greeting": "Bonjour le monde" }

// 伪代码：i18n 动态替换逻辑
const userLocale = detectUserLocale(); // 例如 'zh-CN'
const resources = loadResources(userLocale); // 加载对应语言包

function t(key) {
  return resources[key] || key; // 若无翻译，返回原始键（便于调试）
}

console.log(t('greeting')); // 输出："你好，世界"

npm install i18next i18next-http-backend i18next-browser-languagedetector react-i18next

// i18n.js
import i18n from 'i18next';
import Backend from 'i18next-http-backend';        // 从服务器异步加载翻译文件
import LanguageDetector from 'i18next-browser-languagedetector'; // 自动检测用户语言
import { initReactI18next } from 'react-i18next';  // 与 React 集成

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',       // 默认语言
    debug: true,             // 开发模式开启日志
    interpolation: {
      escapeValue: false,    // React 已防 XSS，无需额外转义
    },
  });

export default i18n;

// public/locales/en/translation.json
{
  "title": "Welcome to My App",
  "description": "This is a fantastic internationalized application.",
  "userMessages": {
    "one": "You have {{count}} message.",
    "other": "You have {{count}} messages."
  }
}

// public/locales/zh/translation.json
{
  "title": "欢迎使用我的应用",
  "description": "这是一个出色的国际化应用。",
  "userMessages": {
    "one": "您有 {{count}} 条消息。",
    "other": "您有 {{count}} 条消息。"
  }
}

import React from 'react';
import { useTranslation, Trans } from 'react-i18next';

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

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

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
      
      {/* 插值与复数自动处理 */}
      <p>{t('userMessages', { count: 5 })}</p>
      
      {/* 复杂结构：保留 HTML 元素 */}
      <Trans i18nKey="complexText">
        Please <button>click here</button> to proceed.
      </Trans>

      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

export default MyComponent;

npm install vue-i18n@next

// src/i18n.js
import { createI18n } from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'Hello world',
      greeting: 'Hello, {name}!'
    }
  },
  zh: {
    message: {
      hello: '你好，世界',
      greeting: '你好，{name}！'
    }
  }
};

const i18n = createI18n({
  legacy: false,          // 启用 Composition API 模式
  locale: 'en',           // 默认语言
  fallbackLocale: 'en',   // 回退语言
  messages,
});

export default i18n;

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';

createApp(App).use(i18n).mount('#app');

<template>
  <div>
    <!-- 基础翻译 -->
    <p>{{ $t('message.hello') }}</p>
    
    <!-- 带参数的插值 -->
    <p>{{ $t('message.greeting', { name: 'Alice' }) }}</p>
    
    <!-- 使用指令（更简洁） -->
    <p v-t="'message.hello'"></p>

    <!-- 语言切换 -->
    <button @click="changeLang('en')">EN</button>
    <button @click="changeLang('zh')">中文</button>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';

const { locale, t } = useI18n();

const changeLang = (lang) => {
  locale.value = lang;
};
</script>

t('welcome', { name: 'John' }) // "Hello, John!"

{
  "item": "{{count}} item",
  "item_plural": "{{count}} items"
}

t('status', { context: 'online' })  // "在线"
t('status', { context: 'offline' }) // "离线"

new Intl.DateTimeFormat('zh-CN').format(new Date())
// → "2025/11/21"