别再把“你好”和“Hello”硬塞进代码里了，那叫灾难。这篇文直接教你怎么优雅地搞双语，不绕弯子，全是干货。看完你就能把多语言切换做得像呼吸一样自然。
做前端这几年，我见过太多项目死在多语言这个坑里。老板一句“我们要出海”，开发就得熬夜改代码，今天改中文，明天改英文，后天老板说还要加个日文，代码库直接乱成一锅粥。我有个前同事，为了赶工期，直接在HTML里写死文本，结果测试发现英文排版全崩，因为英文单词比中文长，容器根本装不下。这种低级错误，咱们别再犯了。
前端如何做双语网站，核心不在于翻译，而在于架构。你得把“内容”和“展示”彻底剥离开。别再用简单的if-else判断语言了，那样维护起来简直是噩梦。
第一步，建立独立的语言资源文件。
别偷懒，别把文案写在组件里。在项目根目录下建个locales文件夹，里面放en.json和zh.json。
比如zh.json里写：
{
"header.title": "欢迎来到我们的世界",
"button.submit": "提交"
}
en.json里对应写：
{
"header.title": "Welcome to our world",
"button.submit": "Submit"
}
注意，key要用点语法，比如header.title，这样层级清晰，以后找文案跟查字典一样快。
第二步，封装一个全局的i18n Hook或Context。
这是最关键的一步。很多小白喜欢在每个组件里单独引入翻译函数，结果导致语言切换时页面闪烁或者状态不同步。你要做一个全局的状态管理，比如用React Context或者Vue的provide/inject。
当用户点击切换语言按钮时，改变全局语言状态，所有订阅了这个状态的组件自动重新渲染。
这里有个坑，就是路由参数的问题。前端如何做双语网站，还得考虑URL的变化。
你可以选择在URL里加前缀，比如/site/en/或者/site/zh/，这样对SEO更友好。
或者直接用查询参数，比如?lang=en。
我推荐用查询参数，因为实现简单，用户刷新页面也不会丢失语言设置。
记得把语言偏好存在localStorage里，下次用户再来，直接读取，不用每次都选。
第三步，处理动态内容和复数规则。
静态文本好办，动态数据就头疼了。比如用户评论数，中文是“1条评论”，英文是“1 comment”或“2 comments”。
这时候就得用专业的i18n库，比如i18next或者vue-i18n。
它们内置了复数规则引擎，你只需要在JSON里配置好单数和复数的格式。
比如：
{
"comments": {
"one": "{{count}} comment",
"other": "{{count}} comments"
}
}
这样库会自动根据数量渲染正确的文本。
还有日期、货币格式，也得用Intl API或者相关库处理，别手动拼接字符串，那太土了。
最后，别忘了测试。
很多项目上线后，英文页面排版乱套，因为没考虑长文本溢出。
你得用一些假文，比如Lorem Ipsum，或者真实的长句子去测试布局。
中文通常比较紧凑，英文松散，字体大小、行高都得微调。
我见过一个案例，某电商网站英文按钮文字太长，直接换行了，导致布局错位，转化率跌了15%。
这种细节，只有真刀真枪干过才知道。
前端如何做双语网站，不是技术难点，是工程思维问题。
别追求花哨的技巧，把基础打牢，把文案抽离，把状态管好。
这样不管以后加多少种语言，你都能从容应对。
别等老板催了才想起来重构，那时候黄花菜都凉了。
赶紧动手，把你的代码清理一遍，你会发现世界清净了不少。
记住，代码是写给人看的，顺便给机器执行。
好的架构，能让你的头发少掉一点。
