我在多次节目中都提到，国际化应该早做，在转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。系统设计之初就应该设计好，避免后续需要上【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。国际化时，导致系统大改。那么，对于前端项【原创不易，请尊重版权】【未经授权禁止转载】目而言，国际化都要解决那些问题，具体实施【转载请注明来源】转载请注明出处：www.tangshuang.net时要考虑那些因素呢？本期聊一聊前端国际化未经授权，禁止复制转载。【本文受版权保护】问题。
【本文受版权保护】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。转载请注明出处：www.tangshua【转载请注明来源】转载请注明出处：www.tangshuang.netng.net在线收听
网易云音乐：点击播放
【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ngnet】【版权所有，侵权必究】【原创内容，转载请注明出处】喜马拉雅：点击播放
【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netang.net【原创内容，转载请注明出处】【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ngnet】【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ngnet】你还可以在苹果自带的podcast应用中【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net搜“Robust”找到我们的节目收听。
【原创不易，请尊重版权】【版权所有，侵权必究】捐赠支持
求打赏🙇如果你觉得 Ro【原创不易，请尊重版权】未经授权，禁止复制转载。bust 这样一档技术类的谈话节目还不错【原创不易，请尊重版权】【本文受版权保护】，希望我继续做下去，不妨打赏支持。。
【访问 www.tangshuang.n【转载请注明来源】【作者：唐霜】et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。
内容大纲
一、概念
【本文首发于唐霜的博客】未经授权，禁止复制转载。【本文受版权保护】
国际化：产品层面，同一产品，将在不同国家【原创内容，转载请注明出处】【本文首发于唐霜的博客】市场推广运营。技术层面，要在一套系统中，【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】能够让产品在不同国家运行，同时解决不同国本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】家对产品的不同需要。前端层面，同一套代码著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。能够实现多语言，同时预留不同国家定制的能【转载请注明来源】著作权归作者所有，禁止商业用途转载。力。
【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】转载请注明出处：www.tangshua【作者：唐霜】【本文首发于唐霜的博客】ng.net【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】【原创不易，请尊重版权】ang.net
本地化：为不同地区文化的特殊需要在视觉上【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。、操作体验上、运营商进行不同呈现。
【作者：唐霜】原创内容，盗版必究。【访问 www.tangshuang.n【作者：唐霜】【原创不易，请尊重版权】et 获取更多精彩内容】【本文首发于唐霜的博客】
关系，国际化是本地化的基础，本地化是产品原创内容，盗版必究。原创内容，盗版必究。实现国际化的具体落实。国际化一般是前期工本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。作，主要是系统整体层面能够提供本地化的能本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。力。本地化一般是当产品在具体地区开拓市场【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。时的工作，主要是在前期系统预留的扩展能力未经授权，禁止复制转载。【作者：唐霜】基础上，根据地区文化或特定国情制定看上去【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。独特（本质上还是一套系统）的产品。举个例未经授权，禁止复制转载。【转载请注明来源】子，腾讯有很多出海业务，在产品系统层面，原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。是提供了实施本地化的能力，但是具体到某个本文作者：唐霜，转载请注明出处。原创内容，盗版必究。国家实施时，需要单独靠本地团队根据本地情【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。况进行深度开发。举个例子，东南亚国家，在【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】日期格式、货币符号、颜色喜好上，都和中国【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。不一样，比如中国人喜欢红色蓝色，但是泰国未经授权，禁止复制转载。【本文首发于唐霜的博客】马来西亚地区可能更喜欢绿色，爱尔兰国庆节原创内容，盗版必究。转载请注明出处：www.tangshuang.net也是绿色为主题色，但在中国，绿色显然又是【作者：唐霜】【本文受版权保护】不好的颜色。
【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ang.net转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ng.net【版权所有，侵权必究】原创内容，盗版必究。
二、前端国际化和本地化
【版权所有，侵权必究】【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】
从前端技术层面而言，其实，我们只能解决国著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】际化本地化中的部分问题，单纯靠前端，是无【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net法解决全部问题的，比如不同地区的CDN怎转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net么去部署，这不是靠单纯前端可以解决的。那本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】么，前端可以解决哪些问题呢？实际上，在前【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。端实际开发中，你可以简单粗暴这么理解，国【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。际化就是支持多语言，本地化就是支持根据当【原创不易，请尊重版权】【原创不易，请尊重版权】地习惯格式化数字、日期、货币等文本。
【本文受版权保护】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】
1. 语言包
【作者：唐霜】【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ang.net【版权所有】唐霜 www.tangshu【版权所有，侵权必究】转载请注明出处：www.tangshuang.netang.net【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ngnet】
- 怎么写语言包比较好？ 转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netng.net著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【原创不易，请尊重版权】
- 如何加载语言包比较合理？（同步异步） 【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netang.net【未经授权禁止转载】
- 关于语言包工作模式的设想（csv->【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】;json） 【原创内容，转载请注明出处】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。ang.net
- 语言包中的占位符（插值） 【本文受版权保护】【转载请注明来源】
2. 语言切换
【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】ngnet】本文作者：唐霜，转载请注明出处。【本文受版权保护】
- 直接通过脚本进行切换，还是通过url跳转未经授权，禁止复制转载。原创内容，盗版必究。到另一个语言的站点？ 转载请注明出处：www.tangshua【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】ng.net原创内容，盗版必究。
- 重新渲染问题 【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。
- 自动根据浏览器判断语言（html[lan【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。g] navigator.languag本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。e || navigator.brows【本文受版权保护】本文版权归作者所有，未经授权不得转载。erLanguage） 原创内容，盗版必究。原创内容，盗版必究。【作者：唐霜】
3. 日期/货币/数字分隔符
【访问 www.tangshuang.n原创内容，盗版必究。【转载请注明来源】et 获取更多精彩内容】【访问 www.tangshuang.n【作者：唐霜】著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】
- 902 300 (法国)，或 9【转载请注明来源】【版权所有，侵权必究】02.300 (德国)，又或者 转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】902,300 (美国) 未经授权，禁止复制转载。【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
- locale 的前半部分表示语言，通常由【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。 2 或 3 位小写字母组成，符合 IS【未经授权禁止转载】【未经授权禁止转载】O 639 【本文受版权保护】【原创内容，转载请注明出处】
- locale 的后半部分表示地区，由符合【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。 ISO 3166标准的 2 或 3 位转载请注明出处：www.tangshuang.net【未经授权禁止转载】大写字母，或符合 UN M.49 未经授权，禁止复制转载。【本文受版权保护】 标准的 3 位数字组成。 【关注微信公众号：wwwtangshua未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netngnet】转载请注明出处：www.tangshua【原创内容，转载请注明出处】【原创不易，请尊重版权】ng.net本文作者：唐霜，转载请注明出处。
- 用浏览器内置的Intl接口，不需要自己去著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】写一大堆格式化逻辑 【未经授权禁止转载】未经授权，禁止复制转载。
4. 几种市面上最流行的国际化方案
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【本文受版权保护】ng.net
- i18next 【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netngnet】本文版权归作者所有，未经授权不得转载。
- Intl封装 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】ngnet】未经授权，禁止复制转载。
- vue-i18n 【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ang.net【本文受版权保护】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。
- react-intl, react-i1未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】8next 著作权归作者所有，禁止商业用途转载。【转载请注明来源】
- angular-translate 【本文受版权保护】【本文首发于唐霜的博客】原创内容，盗版必究。【未经授权禁止转载】
三、其他前端国际化问题
本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】未经授权，禁止复制转载。
1. React SSR 怎么国际化？
【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ang.net【未经授权禁止转载】
- 根据请求来源判断访问者当地语言 （Acc转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ept-Language 或 IP 地址【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】） 转载请注明出处：www.tangshua【原创内容，转载请注明出处】【原创内容，转载请注明出处】ng.net未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【本文首发于唐霜的博客】
2. 普通第三方库怎么国际化？
【转载请注明来源】【作者：唐霜】【本文首发于唐霜的博客】【作者：唐霜】
- 静态常量的多语言问题 【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。
3. 本地化时区问题（包含夏令时问题）
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
- 存储UTC-0+Z，使用时再根据实际使用【版权所有，侵权必究】【原创不易，请尊重版权】者的时区转回来 原创内容，盗版必究。【本文受版权保护】【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】ngnet】转载请注明出处：www.tangshua【版权所有，侵权必究】【作者：唐霜】ng.net
4. CSS 中也可以做国际化
【本文受版权保护】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】
- 属性选择器[lang=zh] 转载请注明出处：www.tangshua【本文首发于唐霜的博客】原创内容，盗版必究。ng.net【作者：唐霜】
- :lang(zh) 伪类 原创内容，盗版必究。【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【作者：唐霜】ang.net【未经授权禁止转载】
- writing-mode: horizo【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ntal-tb(横), vertical【原创不易，请尊重版权】【作者：唐霜】-lr(竖从左到右), vertical【转载请注明来源】【未经授权禁止转载】-rl(竖从右到左) 【访问 www.tangshuang.n【未经授权禁止转载】原创内容，盗版必究。et 获取更多精彩内容】【版权所有，侵权必究】
- sideways-lr 和 sidewa著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ys-rl 侧转 【未经授权禁止转载】【原创内容，转载请注明出处】【原创内容，转载请注明出处】
- text-orientation: te【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】xt-combine-upright 合【原创内容，转载请注明出处】【原创内容，转载请注明出处】并字符为一个字符 【版权所有】唐霜 www.tangshu【作者：唐霜】本文版权归作者所有，未经授权不得转载。ang.net著作权归作者所有，禁止商业用途转载。【作者：唐霜】
- text-emphasis: dot 着本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。重号 【原创内容，转载请注明出处】原创内容，盗版必究。
- font-variant-east-as【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netian 字体变化等等 【未经授权禁止转载】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。
- 参考 https://segmentfault【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】.com/a/1190000022549著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】455 这篇文章 【访问 www.tangshuang.n【本文受版权保护】原创内容，盗版必究。et 获取更多精彩内容】【本文受版权保护】
5. 谷歌翻译插件带来的问题
【本文首发于唐霜的博客】【转载请注明来源】转载请注明出处：www.tangshua【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】ng.net
- 由于谷歌翻译插件会在替换文本时修改标签（【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】DOM结构）会导致vue、react这种【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。基于virtual dom的框架产生问题 著作权归作者所有，禁止商业用途转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。
2020-07-12 4788
