从后端国际化转向了使用vue-i18n前端国际化，不再会出现因为资源缺失导致的service error了，近期又全面整理了下国际化中踩过的坑，分享给大家。
和翻译同学的合作
翻译同学一般使用 https://crowdin.com 来提交翻译，在crowdin提交之后会有脚本定时提交到gitlab的语言资源项目中，开发同学可以通过脚本将语言资源copy到自己的实际项目中，但是要注意需要等翻译100%完成时才进行copy，不然会混杂着未翻译的文案给用户造成困扰。
和翻译同学合作需要注意以下几点：
1.注意尽量不要使用拼接的字符串
比如：
tips=请同意隐私政策和用户协议
千万不要因为用户协议和隐私政策需要在多处用到，就将字符串切分为多个：
agreement=用户协议
privacy=隐私政策
notice=请同意
and=和
这样翻译同学会和莫名其妙，而且不同语言因为语序不一样，我们生硬的组合起来，展示在网页上的整句话会完全不可读。
2.注意单复数的处理
left_times=您还能发送{n}条短信
在其他语言中会有单复数的区分，1 message left，2 messages left。 在阿语中单复数的表达甚至有多达6种。 Android的resource是使用xml，处理单复数如下1
2
3
4<plurals name="watch_face_count">
<item quantity="one">%1$d个手盘</item>
<item quantity="other">%1$d个手盘</item>
</plurals>
Web中暂时没有比较好的处理方法
3.需要注意日期，金额等格式差异的处理
比如在中文中通常是年月日格式：2019-05-13，英语中日期格式是日月年 13-05-2019
4.需要注意rtl语言的特殊ui处理
有很多语言，比如iw_IL，ar等语言习惯都是从左到右的书写习惯，此时除了需要加上 body{direction:rtl}
其他的布局也需要注意将left和right互换。
5.需要注意语言中单双引号的处理
英语en_US，法语fr_FR，意大利语it_IT有单引号，iw_IL希伯来语中有双引号作为字符。
如果出现在js的字符串中，导致语法错误，程序直接无法运行，此时我们需要用上转义字符来避免问题。
写个脚本统一将单双引号进行html转译
| Character | 转义后 |
|---|---|
' |
'（因为 ' 不兼容IE所以使用这个） |
" |
" |
6.需要注意某些语言过长的处理
有些语言，比如 mr_IR 一个单词就非常长，所以一点要做好超长的样式处理，能够做到自适应布局。
对外提供页面原则
国际化的实现通常有两种方案：
1.将每个语言打包成一个页面（index-en_US.html,index-fr_FR.html）
- 通常使用在对于性能和白屏时间有要求的网站首页，采用后端渲染根据对应的语言去加载
- 或者每个语言的差异比较大，不能通过模版语法简单的key-value对应上
2.同一个页面，根据_locale参数或cookie加载不同的语言包(en_US.json,fr_FR.json)
无论使用哪种方式，因为我们对外提供的页面需要被别的页面引用，不应该让每个引用的页面来处理语言和页面对应逻辑，即不应该直接提供zh_CN.html，en_US.html这样的路径，而应该提供一个中间页面index.html，有的locale并不能自动对应locale.html,需要作为页面提供者的我们根据参数_locale=${locale}或者cookie来自动跳转对应的语言版本统一处理。
vue-i18n使用
Vue-i18n 文档 已经很清楚而且现在也有翻译了，不再赘述，需要注意使用webpack延迟加载而不是直接加载全部。
一般情况下都是前端来维护国际化的资源文件，确实是一件费时费力枯燥无味的工作，但是在工作中切忌眼高手低，分配到你的工作一定要做好。随着业务发展，需要支持的语言的种类越来越多，为了方便维护，最开始就要考虑好上面的问题的解决方案。
