前端国际化实现指南：多语言支持方案

介绍前端应用国际化的必要性及实现方案。通过对比硬编码文本的错误做法，展示了使用 i18next 和 vue-i18n 库进行多语言支持的正确方式。内容包括配置步骤、代码示例以及日期数字本地化、RTL 支持等最佳实践。旨在帮助开发者构建支持全球市场的国际化应用。

云间漫步发布于 2026/4/6更新于 2026/4/178 浏览

前端国际化实现指南：多语言支持方案

为什么需要国际化

最近看到一些项目，所有文本都硬编码在代码里，要支持英文时才发现架构问题。开发应用时应考虑全球市场，而非仅针对单一语言。

反面教材

// 反面教材：硬编码文本
function LoginForm() {
  return (
    <form>
      <h1>登录</h1>
      <input placeholder="请输入邮箱" />
      <input placeholder="请输入密码" type="password" />
      <button>登录</button>
      <p>还没有账号？<a href="/register">立即注册</a></p>
    </form>
  );
}

代码分析：硬编码中文会导致海外用户无法理解界面，增加维护成本。

前端国际化的正确姿势

1. 使用 i18next

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

i18n
  .(initReactI18next)
  .({
    : {
      : { : zh },
      : { : en }
    },
    : ,
    : ,
    : { :  }
  });

  i18n;

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

// locales/zh.json
{
  "login": {
    "title": "登录",
    "email": "请输入邮箱",
    "password": "请输入密码",
    "button": "登录",
    "noAccount": "还没有账号？",
    "register": "立即注册"
  }
}

// locales/en.json
{
  "login": {
    "title": "Login",
    "email": "Please enter email",
    "password": "Please enter password",
    "button": "Login",
    "noAccount": "No account?",
    "register": "Register now"
  }
}

// 使用示例
import { useTranslation } from 'react-i18next';

function LoginForm() {
  const { t, i18n } = useTranslation();
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <form>
      <h1>{t('login.title')}</h1>
      <input placeholder={t('login.email')} />
      <input placeholder={t('login.password')} type="password" />
      <button>{t('login.button')}</button>
      <p>
        {t('login.noAccount')}
        <a href="/register">{t('login.register')}</a>
      </p>
      <button onClick={() => changeLanguage('zh')}>中文</button>
      <button onClick={() => changeLanguage('en')}>English</button>
    </form>
  );
}

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

const messages = {
  zh: {
    message: {
      hello: '你好',
      welcome: '欢迎，{name}!'
    }
  },
  en: {
    message: {
      hello: 'Hello',
      welcome: 'Welcome, {name}!'
    }
  }
};

const i18n = createI18n({
  locale: 'zh',
  fallbackLocale: 'en',
  messages
});

export default i18n;

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

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

<!-- 使用示例 -->
<template>
  <p>{{ $t('message.hello') }}</p>
  <p>{{ $t('message.welcome', { name: '张三' }) }}</p>
  <button @click="$i18n.locale = 'en'">English</button>
</template>

前端国际化实现指南：多语言支持方案

前端国际化实现指南：多语言支持方案

为什么需要国际化

反面教材

前端国际化的正确姿势

1. 使用 i18next

更多推荐文章

相关免费在线工具

2. Vue3 中使用 vue-i18n

实战技巧：国际化指南

1. 国际化最佳实践

2. 常用工具

总结

前端国际化实现指南：多语言支持方案

前端国际化实现指南：多语言支持方案

为什么需要国际化

反面教材

前端国际化的正确姿势

1. 使用 i18next

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

2. Vue3 中使用 vue-i18n

实战技巧：国际化指南

1. 国际化最佳实践

2. 常用工具

总结