当前位置：首页 > news >正文

前端国际化：让你的网站走向世界

news 2026/6/7 19:18:17

前端国际化：让你的网站走向世界

毒舌时刻

前端国际化？这不是大公司才需要的吗？

"我的网站只面向国内用户，要什么国际化？"——结果业务拓展到海外，临时抱佛脚，
"我直接用中文写死，多简单！"——结果需要支持英文时，满世界找字符串，
"我用Google翻译，多快！"——结果翻译质量差，用户体验差。

醒醒吧，国际化不是可选的，而是现代前端开发的标配！

为什么你需要这个？

全球用户覆盖：吸引来自不同国家和地区的用户
业务拓展：为未来的海外业务做准备
用户体验：让用户使用自己熟悉的语言
品牌形象：展现专业、全球化的品牌形象

反面教材

// 反面教材：硬编码字符串 function Header() { return ( <div className="header"> <h1>欢迎来到我的网站</h1> <nav> <a href="/">首页</a> <a href="/about">关于我们</a> <a href="/contact">联系我们</a> </nav> </div> ); } // 反面教材：手动切换语言 function App() { const [language, setLanguage] = useState('zh'); const getText = (key) => { const texts = { zh: { welcome: '欢迎', about: '关于我们', contact: '联系我们' }, en: { welcome: 'Welcome', about: 'About Us', contact: 'Contact Us' } }; return texts[language][key]; }; return ( <div> <button onClick={() => setLanguage('zh')}>中文</button> <button onClick={() => setLanguage('en')}>English</button> <h1>{getText('welcome')}</h1> {/* 其他内容 */} </div> ); }

正确的做法

// 正确的做法：使用专业的国际化库 // 安装依赖：npm install i18next react-i18next // i18n.js import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import zh from './locales/zh.json'; import en from './locales/en.json'; // 配置i18next i18n .use(initReactI18next) .init({ resources: { zh: { translation: zh }, en: { translation: en } }, lng: 'zh', // 默认语言 fallbackLng: 'en', // 回退语言 interpolation: { escapeValue: false // React已经默认转义 } }); export default i18n; // locales/zh.json /* { "welcome": "欢迎来到我的网站", "nav": { "home": "首页", "about": "关于我们", "contact": "联系我们" }, "greeting": "你好，{{name}}！", "count": "你有 {{count}} 条消息" } */ // locales/en.json /* { "welcome": "Welcome to my website", "nav": { "home": "Home", "about": "About Us", "contact": "Contact Us" }, "greeting": "Hello, {{name}}!", "count": "You have {{count}} messages" } */ // 正确的做法：在组件中使用 import React from 'react'; import { useTranslation } from 'react-i18next'; function Header() { const { t } = useTranslation(); return ( <div className="header"> <h1>{t('welcome')}</h1> <nav> <a href="/">{t('nav.home')}</a> <a href="/about">{t('nav.about')}</a> <a href="/contact">{t('nav.contact')}</a> </nav> </div> ); } function Greeting({ name }) { const { t } = useTranslation(); return ( <div> {/* 带参数的翻译 */} <p>{t('greeting', { name })}</p> </div> ); } function MessageCount({ count }) { const { t } = useTranslation(); return ( <div> {/* 复数形式 */} <p>{t('count', { count })}</p> </div> ); } // 正确的做法：语言切换组件 import React from 'react'; import { useTranslation } from 'react-i18next'; function LanguageSwitcher() { const { i18n } = useTranslation(); const changeLanguage = (lng) => { i18n.changeLanguage(lng); }; return ( <div className="language-switcher"> <button onClick={() => changeLanguage('zh')}>中文</button> <button onClick={() => changeLanguage('en')}>English</button> </div> ); }