# kiwi 国际化框架使用指南

2,328 阅读3分钟

最近公司的项目国际化用到了kiwi,现阶段kiwi的使用方法与vue-i18n大致相同,翻译都在前端手动进行, 看了kiwi的github文档(github.com/alibaba/kiw… 周末这两天研究了一下,照着文档还是踩了不少坑,现阶段总结一下使用过程中碰到的问题以及使用方法。 

** * 踩坑一:**

 按照文档所说,vscode安装插件kiwi-linter即可提示未翻译的中文, 但是我安装了插件并没有任何效果,后来看github的issue(github.com/alibaba/kiw… 回答说的是要在根目录下新建.lang文件夹,kiwi插件约定以根目录下的langs文件下作为文案来源, 有对应文件夹才会激活插件功能,所以我建立了lang文件夹,但是我发现还是没有效果,鬼使神差的我 又新建了一个.kiwi的文件夹,竟然有提示了。。。而官方文档上的使用方法并没有这个步骤。。我佛了。。

** * 踩坑二: **

 有了提示之后,我开始按照kiwi-cli上的文档介绍,想使用一下它的命令行,结果发现执行了kiwi-init之后, 项目报错了。 

 看报错说vue和vue-template-compiler的版本不匹配,但是package.json里面的版本号明明是一致的, 我尝试了各种方法,包括npm update vue@xx, npm remove vue/vue-template-compiler,然后重新install 相同的版本号都没有作用。后来仔细看报错信息, 是在vue@2.6.11 (C:\Users\ajiao\node_modules\vue\dist\vue.runtime.common.js) 这里, 于是找到相应目录,删除了vue.runtime.common.js,重新运行,ok。。。

 到这里,项目可以运行, kiwi的命令行可以使用,大的问题基本解决了。但是还是用很多小问题有点云里雾里。。      

接下来终于可以使用了!!

使用1: kiwi默认抽取生成的文件为ts,至于怎么抽取成js,我还没研究,希望有用过的小伙伴看到了可以留言。

使用2:

# 导出指定语言的文案,lang取值为配置中distLangs值,如en-US导出还未翻译成英文的中文文案
kiwi --export [filePath] en-US

filePath 为想要导出的文件路径和文件名,可以自行定义。如果当前路径下文件名不存在,则生成新的文件名,如果存在,则进行覆盖。 下图为自己随便导出的翻译。

使用3:

# 导入送翻后的文案
kiwi --import [filePath] en-US

使用方法同上。

注意:导入过程中,要使用export对应导出的文件才行,如果自己新建了文件,好像是不起作用的(这里不确定,还没研究)

先写道这里吧,目前就用了这么多,还有谷歌翻译等功能没有研究,后续在更。

吐槽: 好想吐槽kiwi的文档。。。觉得文档看了一遍,压根不知道怎么用。。

简洁但又省了很多内容,配置也不全觉得