gift

一、选择国际化库 

我们项目用的vue，做国际化我们选用 vue-i18n 

 vue-i18n的用法 （ Tips： 注意vue1.0时，vue-i18n的用法、版本。）

二、抽离变量，做出需要的语言包

  国际化这件事情，研发同学主要 做的是抽离文件中的待翻译文案，再判断选择的语言，加载语言包。（国际化最重要的是有准确的翻译文案，否则陷入产品、测试、研发的无限修改文案中，疲劳地加班）

  前端同学做国际化时，有做3个目标

  找到所有的要国际化的文案，并将每个文案对应唯一的key变量

  在所有替换文案的地方，写成vue-i18n国际化的表达式形式，例如： $t(' key0 ')

  做出语言包  例如 中文语言包是一份 {key0: 用户名, key1: 密码 } 对照表   英文语言包是一份 {key0: User Name, key1:  Password} 的对照表

 下面对应每一个step，概括方法、遇到的问题，以及需要优化的地方

STEP 1  找到所有的要国际化文案

方法：用正则匹配出来html和js的中文，抽离出来

把抽离出的中文汇总，去重，用唯一key值标识每个中文，例如  key: 中文  做成 中文语言包

遇到的问题：

① 抽离中文时，有些没考虑到的情况，比如表达式中的中文

② 中文+表达式在一起时，我们只需要抽离出其中的中文

③js文件抽离表达式中的中文

④ js文件中``模板中的中文做抽离

⑤ 文案之间有变量，比如 “证书n天内过期”的拼凑字符串，可以将它写成模板字符串，省去考虑变量在中英不同语境下位置的问题。

优化的方法：应对这些特殊情况，在脚本中做补充。

STEP2  将中文替换成 国际化所需要的表达式

方法：把抽离出的中文用vue-i18n的表达式替换

例如 $t(' key ')

key对应每个语言的标识值，为保证唯一，我这里用 父文件夹名+文件夹名+序号 (例如：ruleIds0) 编写每个key值

遇到的问题：①如果不做中文的去重，会有很多一样的变量。 但是去重后，也有一些不便，需要手动修改特殊情况的文案

②html中包含 placeholder title等表达式，需要做些处理

③ 配置文件等要根据中英对照表生成一份英文版

STEP3 做语言包

方法：①将抽离的中文去重后，就是需要翻译的文案内容了。这时让翻译或产品给出对应的英文文案

②研发以 中文 - 英文 的格式写成一份中英对照表（很重要的表，如果产品、翻译和测试有更新直接维护这份文档，对大家都是好事情，否则大家做很多重复工作。）

③研发以中英对照表，根据中文对应的唯一key值，写出为中文包如左图，和英文包如右图，当中英对照表有更新时，写一个脚本自动生成两份语言包即可。

遇到的问题：① 文案会重复修改，如果中英对照表由产品、测试共同维护，大家工作量会减小很多很多。

优化的方法：

其他注意项

以上完成了国际化工作的50%，还有一些注意项：

组件的国际化

英文版的样式会发生变化，需要修改一些样式

与产品、翻译确定好翻译文案的格式，减少修改文案的次数