批量处理vue2中文硬编码转i18n国际化(保姆级)

背景

公司的项目需要适应国际化的需求,但是因为代码是一个成品的项目,也就导致,代码量巨大,连带着需要转国际化的硬编码中文也很多,如果一点点纯手工改动,会很呆,不仅费时费力,而且因为参与的人多,而国际化的文件就那两个,改起来疯狂冲突,所以批量处理刻不容缓。

技术选型

此处我找了网上的很多攻略,但是大多都是只讲一半,剩下的全靠自己摸索,也就导致需要这里找一点哪里找一点。而且并非一个成体系的,有一些甚至还需要使用百度翻译的api接口,最重要的是那个玩意有数量限制,而且还需要营业执照什么的,太麻烦了,因此就干脆放弃了那个。
关于i18n的配置还请自行查找文章进行配置

使用软件与插件

此处使用的软件为vscode,插件为i18n-ally与du-i18n

插件使用

打开项目的vscode之后在插件里面搜索i18n ally 如下图所示的框选的安装即可
在这里插入图片描述
i18n-ally配置文件位置如下图所示(一般在项目的最上面,第一个或者第二个就是这个文件夹)
需要注意的是这个配置文件只有在安装之后才会出现,一定要先安装插件
在这里插入图片描述
在这里插入图片描述
默认会有i18n-ally默认的配置文件
此处需要修改的有i18n-ally.localesPaths文件路径修改成自己的文件存放位置
其他的基本不用改,因为大部分都是中文翻译成英文

{
    "i18n-ally.localesPaths": ["src/i18n/lang"],
    "i18n-ally.sourceLanguage": "zh",
    "i18n-ally.displayLanguage": "zh-CN",
    "i18n-ally.keystyle": "nested",
    "i18n-ally.sortKeys": true,
    "i18n-ally.namespace": true,
    "i18n-ally.enabledParsers": ["json"],
    "i18n-ally.enabledFrameworks": ["vue"],
  
}

第二个需要下载的插件为du i18n
在这里插入图片描述
安装之后随便找个文件打开,右键选择国际化,选择设置,如下图所示

在这里插入图片描述
他会自己打开一个文件
在这里插入图片描述
需要重点修改的有tempFileName属性值,这个值为生成的国际化所在的文件名称,如果不设置名称的话,他会每个文件都创建一个文件,如果起了名字的话,他会把所有的国际化都写入一个文件,这样就省去了来回扒文件的问题。
其他的地方根据自己的情况酌情修改,其他的属性本文不涉及,也就不再提及,有兴趣的可以自行查找
下图为i18n的文件结构
在这里插入图片描述
需要注意的是语言存放必须位json,不能为js或者ts等,如果为其他的文件需要转换成json格式
如果存在js或者ts的话,使用下面的链接进行转移成json
https://uutool.cn/obj2json/#google_vignette
到这里基本上准备环节就结束了

剩下的就是操作了

随便打开一个文件,右键国际化,选择批量扫描中文
在这里插入图片描述
此时打开的是文件夹选择器,此时切记翻译的时候不要把i18n囊括进去,尤其是在已经翻译过一部分的情况下,直接使用会连带着原本已经翻译好的也给翻译了,这样就得不偿失了。
在这里插入图片描述
此时我们可以选择views等文件进行翻译,如果文件数量庞大的话,可能会比较慢,还请耐心等候,不要因为没反应就直接关闭
等到执行完成之后会在i18n下面多出来一个文件,文件名称为你在上面自己修改的名称
在这里插入图片描述
我的是test.json
在这里插入图片描述
此时就可以看到生成的文件了,但是会有一个问题他会确实英文部分,但是不要紧,我们把zh里面的中文部分复制到中文所对应的文件夹内。
等到复制完成,点击左侧如下图所示的图标,会看到有个叫翻译进度的东西

在这里插入图片描述
需要注意的是,此软件只能把中文翻译成其他语言,不支持翻译回中文
正常的话,en这个区域缺失的文案数量应该等于你新复制到中文文件内的国际化数量
点击对应的地球图标,会有个提示,点击确定即可
在这里插入图片描述
如果存在翻译报错超时的情况,可以使用steam++加速器进行加速
此加速器是免费的,我勾选了所有的服务,具体是那个我也不确认,在使用的时候也可以勾选所有的加速即可
在这里插入图片描述
需要注意的是,我尝试的是一次性翻译五千条是没问题的,九千条就会出现不执行的情况,还请注意一下。

补充

因为du i18n生成的时候会有一定情况的缺失,尤其是括号可能会出现不翻译的情况,此时可以使用翻译捡漏功能生成确实的部分,然后手动添加,毕竟工具也不是万能的,如果大佬有解决方案,也欢迎讨论。
在这里插入图片描述
插件存在一定的插入错误的问题,就是多代码里使用里单引号,因为它使用的也是单引号,存在把一些按钮转换成文字展示的情况,特殊情况需要自行排查解决了,但是大部分的问题都可已解决。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值