一：引言

前端国际化，是指在前端开发过程中设计和实现多语言支持，使得应用能适应不同语言和区域的用户

二：解决方案

（1）：采用成熟库，React‌: react-i18next (基于 i18next) 或 react-intl、Vue‌: vue-i18n

   1：react方式

   步骤一：安装核心库

npm install i18next react-i18next。

   步骤二：资源文件分配

  src/
├── locales/
│   ├── en/
│   │   ├── common.json
│   │   └── home.json
│   ├── zh/
│   │   ├── common.json
│   │   └── home.json
│   └── index.js (或 ts)

 {
  "welcome": "欢迎回来",
  "items_count": "共有 {{count}} 项"
}

    步骤三：配置i18n实例

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

// 引入语言资源 (在实际大型项目中通常使用 backend 插件异步加载)
import enTranslation from '../public/locales/en/translation.json';
import zhTranslation from '../public/locales/zh/translation.json';

const resources = {
  en: {
    translation: enTranslation
  },
  zh: {
    translation: zhTranslation
  }
};

i18n
  .use(LanguageDetector) // 自动检测用户语言
  .use(initReactI18next) // 将 i18n 实例传递给 react-i18next
  .init({
    resources,
    fallbackLng: 'en', // 回退语言
    debug: true,
    interpolation: {
      escapeValue: false, // React 已经安全处理了转义
    },
    detection: {
      order: ['localStorage', 'navigator'],
      caches: ['localStorage']
    }
  });

export default i18n;

    步骤四：注入应用包裹

import React from 'react';
import { useTranslation } from 'react-i18next';
import './App.css';

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

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

  return (
    <div className="App">
      <header className="App-header">
        <h1>{t('welcome')}</h1>
        <p>{t('description')}</p>
        <p>{t('currentLang')}</p>
        
        <div className="language-switcher">
          <button 
            onClick={() => changeLanguage('zh')} 
            disabled={i18n.language === 'zh'}
          >
            中文
          </button>
          <button 
            onClick={() => changeLanguage('en')} 
            disabled={i18n.language === 'en'}
          >
            English
          </button>
        </div>
      </header>
    </div>
  );
}

export default App;

步骤五：使用

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation('common'); // 指定命名空间
  
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => i18n.changeLanguage('en')}>Switch to English</button>
    </div>
  );
}

步骤六：持久化使用 i18next-browser-languagedetector 插件，切换语言使用调用 i18n.changeLanguage(lng)

2：vue方式

步骤一：安装依赖

npm install vue-i18n@next

步骤二：配置i18n实例

import { createI18n } from 'vue-i18n'

// 定义语言包
const messages = {
  en: {
    message: {
      hello: 'Hello, World!',
      welcome: 'Welcome to Vue App'
    }
  },
  zh: {
    message: {
      hello: '你好，世界！',
      welcome: '欢迎使用 Vue 应用'
    }
  }
}

const i18n = createI18n({
  legacy: false, // 必须设为 false 以启用 Composition API
  locale: 'zh', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages
})

export default i18n

步骤三：注入应用

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n' // 引入配置

const app = createApp(App)
app.use(i18n) // 注册插件
app.mount('#app')

步骤四：组件使用

<template>
  <div>
    <!-- 1. 基础文本翻译 -->
    <h1>{{ t('message.hello') }}</h1>
    
    <!-- 2. 带变量的插值 -->
    <p>{{ t('message.welcome') }}</p>
    
    <!-- 3. 切换语言按钮 -->
    <button @click="toggleLang">
      {{ currentLang === 'zh' ? 'Switch to English' : '切换到中文' }}
    </button>
  </div>
</template>

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

// 获取 i18n 实例
const { t, locale } = useI18n()

// 当前语言
const currentLang = computed(() => locale.value)

// 切换语言方法
const toggleLang = () => {
  locale.value = locale.value === 'zh' ? 'en' : 'zh'
}
</script>

三：拓展

1：动态按需加载=>可使用i18next-http-backend 或 Webpack 的动态 import，通过设置backend.loadPath，需要某种语言自动发起请求

2：格式化本地化=>使用 Intl.DateTimeFormat 或库如 dayjs/date-fns 的 locale 插件

3：路由与seo=>为了 SEO 友好，建议将语言代码放在 URL 中，如 /en/about 和 /zh/about

4：布局适配=>使用 margin-inline-start 代替 margin-left，text-align: start 代替 left

四：进阶

1：自动化提取与翻译

步骤：提取->利用抽象语法树（AST）解析技术扫描源代码，精准识别需要国际化的字符串,可使用 i18n-ally VS Code 插件进行本地实时提取

翻译->将提取出的源语言（Source Language）文本批量发送至机器翻译引擎

回写->翻译人员校对后返回，脚本再导入项目