1.0.0 • Published 1 year ago

fes-locale-script v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

FES 国际化自动脚本工具

功能

  1. 读取指定目录下的所有.vue文件,自动替换template与script中的语言标签为变量引用形式。以中文作为key,提高代码可读性。 例:
<!-- 转换前: -->
<h1 label="排序">组织架构管理</h1>

<!-- 转换后: -->
<h1 :label="$t('_.排序')">{{ $t('_.组织架构管理') }}</h1>

用法

安装与执行

wnpm i -g fes-locale-gen
fes-locale-gen -d <目录> -e <排除文件>

注意事项

脚本将完成80%的重复性文本替换工作,剩余部分需要人工处理并同时做好替换后的核对。

注意以下是脚本执行后需要手动完成的部分:

  1. 需要为每个文件手动添加i18n插件的引入语句。

/pages/**.vue

import { useI18n } from '@fesjs/fes';
const { t: $t } = useI18n();
  1. 配置好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',
};
  1. 手动配置页面标题与菜单的翻译

  2. 脚本执行前做好git版本管理,脚本执行后做好生成结果检查

暂未覆盖的场景

  • template中的表达式,如<p>{{ row.compare === 1 ? '是' : '否' }}</p>
  • 待补充...

TODO

  • 接入翻译服务,如百度翻译、腾讯翻译等