国际化流程

准备

通过@vue/cli-service创建的项目，在添加vue-i18n (opens new window)插件之后，国际化工作开始

文件更新

• 找出需要国际化的汉字
• 找到并打开对应国际化配置文件（通常src/locales/zh-cn.json）
• 为了更加方便维护，需要为其取一个语义化的英文
• 添加key,value到json文件中

复制

通常手动添加的JSON文件为非扁平的json,非扁平在查看时候也会更加直观。然而这就导致在复制层级很深的key需要一层一层复制粘贴

替换

判断汉字位置，根据不同的位置使用不同的语法：

• template 标签之间，使用 {{}} 包裹 "$t(sth.key)"
• template 标签 property，使用 "$t(sth.key)" 替换并在属性前手动添加:
• script 标签之间的，使用 "this.$t(sth.key)" 替换

重复工作

上面所有流程走完之后，一个汉字的国际化终于结束了。然而一个.vue文件有成百上千甚至更多个需要国际化的汉字，一个大的项目也许有数百个vue文件，这意味着ctrl+c、ctrl+v也许要点击百万次以上😩

可读性

国际化完成之后，尽管语义化的key让人可以大概知道对应的含义，但是一堆英文堆在一起，还是让国际化后的项目可读性大大降低