前端国际化实现：别再只支持中文了

前端国际化实现：别再只支持中文了

毒舌时刻

这代码写得跟网红滤镜似的——仅供参考。

各位前端同行，咱们今天聊聊前端国际化。别告诉我你的应用只支持中文，那感觉就像只卖一种口味的冰淇淋——单调又无趣。

为什么你需要国际化

最近看到一个项目，所有文本都硬编码在代码里，要支持英文时傻眼了，我差点当场去世。我就想问：你是在开发应用还是在开发中文专用软件？

反面教材

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

毒舌点评：这代码，我看了都替你的海外用户着急。硬编码中文，你是想让外国用户看天书吗？

前端国际化的正确姿势

1. 使用i18next

// 正确姿势：使用i18next // i18n/index.js import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import zh from './locales/zh.json'; import en from './locales/en.json'; i18n .use(initReactI18next) .init({ resources: { zh: { translation: zh }, en: { translation: en } }, lng: 'zh', fallbackLng: 'zh', interpolation: { escapeValue: false } }); export default i18n; // 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> ); } 

2. Vue3中使用vue-i18n

// 正确姿势：Vue3国际化 // 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. 国际化最佳实践

1. 提前规划：项目初期就考虑国际化
2. 提取文本：所有用户可见文本都要提取
3. 格式化：日期、数字、货币都要本地化
4. RTL支持：阿拉伯语等从右到左的语言

2. 常用工具

• i18next：React国际化
• vue-i18n：Vue国际化
• FormatJS：格式化库
• react-intl：React国际化

最后想说的

国际化不是可选项，是必选项。别再只支持中文了——国际化一下，你的应用会走向更广阔的市场。

国际化就像学外语，一开始觉得麻烦，但学会后世界大门就打开了。别做井底之蛙，做世界公民。