记一套前端国际化方案【Vue + Express】

由于在去年的大部分时间都在做出海项目，分享一套Web国际化的方案。
在出海项目大多转冷的今天，给去年的疯狂留个念想。

---

背景

18年春夏之交加入了这个国际化部门，当时在Web端还没有良好对应的国际化方案。于是一套适配多国家多语言的国际化方案就亟待开发。

问题描述：
国际化方案，即多语言、多货币支付方案，主要是为了给不同国家地域的用户提供更local的用户体验。

• 多语言方案分为 界面语言 和 内容语言。
• 多货币支付方案。

多语言技术方案

• 前言
  考虑到国家-用户-语言的三元关系并不是单纯的统一关系，即中国的用户并不都是使用中文，美国的用户也并不都是使用英语，并且印度的用户使用英语和法语的几率也是比较大的。

• 国家语言代码
  所以我们使用一套类似 lcid 的方式来标识国家与语言，由服务端存一份支持的国家语言映射表来控制客户端和web端最终支持的国家与语言，当遇到不支持的case时，fallback到EN-US。

• 首语言判断
  我们没有采用根据用户国家、ip来直接判断用户语言的方式，而是分为在App内与浏览器中区别对待。首先默认的都为英语，在App内根据客户端获取的设备lcid带入到请求中，web端根据带过来的lcid进行展示不做其他判断；在浏览器中在Node端获取浏览器支持语言（acceptsLanguages）的第一个作为首语言。如此转换成对应的lcid来进行展示和请求。

• 此处使用的技术栈为 i18n-express 和 vue-i18n
  区别是，在这个项目中有一部分的界面语言是由服务端直出的，所以需要express来做多语言的替换，而大部分的界面语言则是由vue来渲染所以使用vue-i18n来替换。

多语言实现细节

多货币支付方案

• 使用的是Google Play 和 Apple Store的官方方式，需要注意的是 对于不支持GP 和 AS 的地方要做降级兼容。

其它

• 内容语言的翻译部分使用的是zendesk + 脚本，大神们写的脚本我就按下不表了；
• Server、 Client部分都是通过通用的lcid 来判断；
• vue-i18n 中使用细节，不仅可以直接可以获得界面语言。也可以在执行过程中直接获得文案，并且进行操作，加大了灵活度。
• chrome https://developer.chrome.com/apps/i18n