# 国际化流程

准备

通过@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+cctrl+v也许要点击百万次以上😩

# 可读性

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