4

前提

最近项目用到了vue-18n做国际化,也是初次自己在项目里写这些东西,然后编码过程中就遇到些痛点?

因为项目里是将语言包根据每一种语言单独存放在对应的json文件里的,所以每次在新增或者修改某个key的时候,就要分别去每个文件,找到对应的key去改值。
偶尔还改忘了某个语言包。

  • Key要写多次
  • 假如忘了在某个语言包里写某个Key也不知道

于是写了一个工具来满足我的要求。


更新记录

2021年02月21日

今天突然看到项目多了个Star,于是决定再完善一下这个项目。
然后就发现,身为一个国际化语言制作工具,怎么能自己不支持切换语言呢!
于是简单修改了一下界面,增加了语言切换功能。

但是由于本人水平有限,只能先把按钮啥的给翻译一下,一些说明文字就暂时不献丑翻译了。

然后接下来准备再重新设计一下界面,通过Tree+Table的形式去展现,Tree用来管理数据的结构,Table就用来维护不同语言的值,感觉这样会更加直观一点。

界面

image.png

工具使用说明

可点击【查看帮助】按钮查看详细说明

可视化的好处

  • 统一管理多语言,Key只需要写一次,比硬编码更加直观。
  • 同一个Key可以直观的看到所有语言是否都设置过值,不会出现遗漏的情况
  • 可以直接复制节点路径,方便在代码中粘贴。防止手动输入出现手误的现象。

导入

支持拖放文件到文本框与选择文本文件导入

导出

最后导出为一个名为messages.json的文件

Github

vue-i18n-generator

网址

在线使用


我是好人
2.2k 声望17 粉丝

Erpack 二次封装ant-design-vue,可以看看。