前端国际化最佳实践：让你的网站走向世界

优质文章学习记录

— 5 min read

前端国际化最佳实践：让你的网站走向世界

毒舌时刻

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

"我的网站只面向国内用户，要什么国际化"——结果业务拓展到海外，临时抱佛脚，
"我直接用中文写死，多简单"——结果需要支持英文时，满世界找字符串，
"我用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'; import ja from './locales/ja.json'; // 配置i18next i18n .use(initReactI18next) .init({ resources: { zh: { translation: zh }, en: { translation: en }, ja: { translation: ja } }, lng: 'zh', // 默认语言 fallbackLng: 'en', // 回退语言 interpolation: { escapeValue: false // React已经默认转义 }, // 检测用户浏览器语言 detection: { order: ['navigator', 'localStorage', 'cookie'], caches: ['localStorage', 'cookie'] } }); export default i18n; // locales/zh.json /* { "welcome": "欢迎来到我的网站", "nav": { "home": "首页", "about": "关于我们", "contact": "联系我们" }, "greeting": "你好，{{name}}！", "count": "你有 {{count}} 条消息", "date": "今天是 {{date}}" } */ // 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", "date": "Today is {{date}}" } */ // 正确的做法：在组件中使用 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> ); } // 正确的做法：语言切换组件 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> <button onClick={() => changeLanguage('ja')}>日本語</button> </div> ); } // 正确的做法：日期和时间本地化 import React from 'react'; import { useTranslation } from 'react-i18next'; import { format } from 'date-fns'; import { zhCN, enUS, ja } from 'date-fns/locale'; function LocalizedDate() { const { i18n } = useTranslation(); const currentDate = new Date(); // 根据当前语言选择对应的locale const getLocale = () => { switch (i18n.language) { case 'zh': return zhCN; case 'en': return enUS; case 'ja': return ja; default: return enUS; } }; const formattedDate = format(currentDate, 'yyyy年MM月dd日 EEEE', { locale: getLocale() }); return ( <div> <p>{formattedDate}</p> </div> ); } // 正确的做法：数字本地化 function LocalizedNumber({ number }) { const { i18n } = useTranslation(); const formattedNumber = new Intl.NumberFormat(i18n.language).format(number); return ( <div> <p>{formattedNumber}</p> </div> ); } // 正确的做法：货币本地化 function LocalizedCurrency({ amount, currency }) { const { i18n } = useTranslation(); const formattedCurrency = new Intl.NumberFormat(i18n.language, { style: 'currency', currency: currency }).format(amount); return ( <div> <p>{formattedCurrency}</p> </div> ); } // 正确的做法：RTL语言支持 // 在CSS中添加 /* [dir="rtl"] { text-align: right; } [dir="rtl"] .nav { flex-direction: row-reverse; } */ function App() { const { i18n } = useTranslation(); // 根据当前语言设置direction React.useEffect(() => { const rtlLanguages = ['ar', 'he', 'fa']; document.documentElement.dir = rtlLanguages.includes(i18n.language) ? 'rtl' : 'ltr'; }, [i18n.language]); return ( <div> <LanguageSwitcher /> <Header /> <Greeting name="张三" /> <LocalizedDate /> <LocalizedNumber number={1234567.89} /> <LocalizedCurrency amount={100} currency="CNY" /> </div> ); } // 正确的做法：使用i18next-http-backend加载翻译 // 安装依赖：npm install i18next-http-backend /* import Backend from 'i18next-http-backend'; i18n .use(Backend) .use(initReactI18next) .init({ backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' }, // 其他配置... }); */ // 正确的做法：使用i18next-scanner自动提取翻译 // package.json /* { "scripts": { "i18n:scan": "i18next-scanner --config i18next-scanner.config.js src" } } */ // i18next-scanner.config.js /* module.exports = { input: [ 'src/**/*.{js,jsx,ts,tsx}', ], output: './locales', options: { lngs: ['zh', 'en', 'ja'], defaultLng: 'zh', ns: ['translation'], defaultValue: (lng, ns, key) => key, resourceKeySeparator: '.', nsSeparator: ':', interpolation: { prefix: '{{', suffix: '}}' } } }; */

毒舌点评

看看，这才叫前端国际化最佳实践！不是简单地手动切换字符串，而是使用专业的国际化库，统一管理翻译资源，支持日期、时间、数字、货币的本地化，甚至支持RTL语言。

记住，国际化不仅仅是翻译文本，还包括日期、时间、数字、货币等格式的本地化，以及RTL（从右到左）语言的支持。

所以，别再觉得国际化麻烦了，它是你网站走向世界的必备技能！

总结

  • 使用专业库：如i18next、react-intl等
  • 统一管理翻译资源：将翻译文本放在单独的JSON文件中
  • 支持参数化翻译：处理带变量的文本
  • 自动检测语言：根据用户浏览器设置自动切换语言
  • 本地化格式：处理日期、时间、数字、货币的本地化
  • RTL支持：支持从右到左的语言如阿拉伯语
  • 懒加载翻译：按需加载翻译资源，减少包大小
  • 自动提取翻译：使用工具自动提取需要翻译的字符串

前端国际化最佳实践，让你的网站走向世界！

Read more

Qwen2.5极速对话机器人：1GB轻量级AI开箱即用

Qwen2.5极速对话机器人：1GB轻量级AI开箱即用 1. 引言 1.1 边缘计算时代的AI需求 随着人工智能技术的普及，越来越多的应用场景开始向终端侧迁移。在工业控制、智能客服、嵌入式设备等边缘计算环境中，对模型体积小、推理速度快、资源占用低的需求日益迫切。传统的大型语言模型虽然性能强大，但往往依赖高性能GPU和大量显存，难以部署在算力受限的设备上。 在此背景下，Qwen/Qwen2.5-0.5B-Instruct 模型应运而生。作为通义千问系列中最小的指令微调版本，它以仅约1GB的模型权重实现了出色的中文理解和生成能力，特别适合在无GPU支持的CPU环境下运行。 1.2 本文目标与适用场景 本文将详细介绍如何基于官方镜像 Qwen/Qwen2.5-0.5B-Instruct 极速对话机器人 快速搭建一个可交互的Web聊天应用。你无需任何深度学习背景或复杂配置，只需几分钟即可完成部署并开始与AI对话。 本方案适用于以下场景： * 教学演示与快速原型开发 * 资源受限环境下的本地化AI服务 * 中文问答系统、代码辅助编写工具的轻量化实现 * 对响应延迟敏感的
【玩转机械臂】（二）机器人DH参数模型与正运动学

【玩转机械臂】（二）机器人DH参数模型与正运动学

目录 1  DH参数模型（Denavit-Hartenberg） 1.1  四个DH参数的定义 1.2  机器人坐标系的建立方法 1.3  DH参数表及相应坐标变换 2  机器人正向运动学 2.1  正运动学与雅可比矩阵 3  机器人运动的速度  3.1  速度在的坐标系间的变换 3.1.1  速度变换的一般形式 3.1.2  用角速度矢量表示坐标系的旋转运动 3.1.3  角速度矢量在不同坐标系之间的传递 3.2  速度在机器人关节间的传递 3.2.1  转动关节向前传递 3.2.2  移动关节向前传递 3.2.3  小结
windows部署的OpenClaw接入飞书机器人

windows部署的OpenClaw接入飞书机器人

文章目录 * 前言 * 一、创建飞书应用 * 1.登录飞书开放平台 * 2.创建企业自建应用 * 3.发布企业自建应用 * 二、OpenClaw配置接入飞书 * 1.安装飞书插件 * 2.配置飞书事件回调 * 3.使用测试 * 总结 前言 OpenClaw 原生支持的即时通信平台主要是海外的 WhatsApp、Telegram、Discord、Slack、iMessage 等，国内用户不习惯，目前国产即时通信软件大厂也跟进了，现在钉钉，飞书等都已支持接入OpenClaw，本文主要是配置飞书机器人接入 OpenClaw，使大家可以通过飞书即可指挥OpenClaw为我们干活，当然配置钉钉接入也可以作为参考。 * windowsWindows 本地（PowerShell）一键部署 OpenClaw * 飞书账号（有飞书开放平台权限的账号） 一、创建飞书应用 1.登录飞书开放平台 1.1 网页访问，

简单易学的分离式部署小米智能家居Miloco方法

一、安装环境 * Windows用户：安装WSL2以及Docker * macOS/Linux用户：安装Docker 此处不再赘述，网上随便找个教程即可。特别地，对于Windows用户来说，你需要将 WSL2 的网络模式设置为 Mirrored。 二、使用Docker部署Miloco后端 以下均为bash命令。请Windows用户进入WSL2 / Linux、macOS用户进入终端操作： mkdir miloco cd milico vi docker-compose.yml 以下是compose的内容（不会使用vi的同学可以傻瓜式操作：先按i，再使用粘贴功能，然后按冒号，输入wq然后回车，记得关闭输入法）： services:backend:container_name: miloco-backend image: ghcr.nju.edu.cn/xiaomi/miloco-backend:latest network_mode: