fes-locale-script
v1.0.0
Published
## 功能 1. 读取指定目录下的所有.vue文件,自动替换template与script中的语言标签为变量引用形式。以中文作为key,提高代码可读性。 例: ``` <!-- 转换前: --> <h1 label="排序">组织架构管理</h1>
Downloads
1
Readme
FES 国际化自动脚本工具
功能
- 读取指定目录下的所有.vue文件,自动替换template与script中的语言标签为变量引用形式。以中文作为key,提高代码可读性。 例:
<!-- 转换前: -->
<h1 label="排序">组织架构管理</h1>
<!-- 转换后: -->
<h1 :label="$t('_.排序')">{{ $t('_.组织架构管理') }}</h1>
用法
安装与执行
wnpm i -g fes-locale-gen
fes-locale-gen -d <目录> -e <排除文件>
注意事项
脚本将完成80%的重复性文本替换工作,剩余部分需要人工处理并同时做好替换后的核对。
注意以下是脚本执行后需要手动完成的部分:
- 需要为每个文件手动添加i18n插件的引入语句。
/pages/**.vue
import { useI18n } from '@fesjs/fes';
const { t: $t } = useI18n();
- 配置好fes-i18n插件并引入准备好的翻译配置文件:
/locales/en-US.js
/**
* 1. 引入自动生成的翻译配置
* (将生成的翻译配置放在其他目录的原因,locales目录会影响导航栏中语言切换选项的展示)
* */
import enUSCommon from './locales-generated/en-US-common';
export default {
/** 2. 使用下划线作为自动生成的命名空间 */
_: enUSCommon,
/** 3. 手动添加或主动覆盖的翻译配置 */
首页: 'Front Page',
产品管理: 'Product Management',
天: 'Day',
周: 'Week',
月: 'Month',
};
手动配置页面标题与菜单的翻译
脚本执行前做好git版本管理,脚本执行后做好生成结果检查
暂未覆盖的场景
- template中的表达式,如
<p>{{ row.compare === 1 ? '是' : '否' }}</p>
- 待补充...
TODO
- 接入翻译服务,如百度翻译、腾讯翻译等