Vue一键自动提取国际化文案

2,068 阅读2分钟

vue项目国际化 替换工具

一键自动提取和恢复vue项目国际化,解决国际化复杂的痛点,目前工具还有隐藏未知的问题,希望大家踊跃提issue,也希望大家一起来维护。

安装

sudo npm install -g appiron-i18n-cli
sudo yarn global add appiron-i18n-cli

自动国际化

1.执行命令

i18n create

选择翻译文案

2.输入需要提取文案的目录,默认为src目录

选择翻译目录

3.选择需要翻译的语言,目前支持的语言有以下几种(翻译使用的是百度翻译,需要输入百度翻译开发者appid和key)

选择翻译语言

4.输入appid和key(第三步如果没有选择需要翻译的语言,会直接跳过这一步)

输入百度翻译id和key

5.可以自己输入文案前缀,默认为项目名称

选择自定义前缀

6.如果输入了自定义前缀就不能设置为单文件,单文件序列就是生成文案的key就是翻译的文件名

是否是单文件

7.设置文案生成目录,默认为根目录下的i18n目录,没有会自动生成

设置文案生成目录

8.全部选择完成按回车键进行自动文案提取和翻译,最后出现Success

success

自动恢复国际化

1.执行命令

i18n create

选择还原国际化

1.输入需要还原的目录,默认为src目录

选择翻译目录

2.选择还原文案所在目录,默认为根目录下的i18n目录下的zh-CH.json文件

选择翻译语言

3.最后回车键确认还原国际化,出现Success表示成功

是否是单文件

注意事项

1. vue模板中不能模板字符串和中文混合使用,只能使用其中任意一种

amy01

2. vue模板中文不能出现<>这种符号,如果确实不能避免可以使用&gt; &lt;代替

amy02

3. vue模板中完整被注释的标签也会被国际化提取,注释的时候可以把标签的尖括号去掉一部分

amy03

项目开源地址

appiron-i18n-cli

参考

vue-i18n 文档 vue-i18n-generator 文档