Skip to content

vue 项目国际化全流程解决方案: 一个命令行工具,对代码里的中文文案一键完成提取、替换、翻译、导入、导出等,告别手动操作

License

Notifications You must be signed in to change notification settings

jonjia/vue-i18n-code-shift

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-i18n-code-shift

vue 项目国际化全流程解决方案: 一个命令行工具,对代码里的中文文案一键完成提取、替换、翻译、导入、导出等,告别手动操作

功能

  • 一键提取并替换中文文案
  • 导出未翻译的文案
  • 导入翻译好的文案

安装

npm install -g vue-i18n-code-shift

使用

示例

  1. 在项目根目录(example/projectAfter)使用 vics init 命令初始化,生成配置文件(默认是 .vics 目录)
  2. 使用 vics one 命令一键提取替换(也可以分步使用 vics extractvics replace 命令)
  3. 使用 vics export en 导出未翻译的文件,就可以送翻了
  4. 使用 vics sync 暂时 mock 语料
  5. 使用 vics import en 翻译好的 xlsx 文件路径 导入翻译好的语料

效果

  • .vue 文件 vue
  • .js 文件 js

命令

vics init

初始化项目,生成配置文件 vics-config.json

{
  // vics文件根目录,用于放置提取的langs文件
  vicsDir: './.vics',

  // 配置文件目录,若调整配置文件,此处可手动修改
  configFile: './.vics/vics-config.json',

  // 语言目录名,注意连线和下划线
  srcLang: 'zh-CN',
  distLangs: ['en'],
  langMap: {
    'en_US': 'en',
    'en-US': 'en',
    'en': 'en',
  },

  // 百度翻译
  baiduAppid: '',
  baiduKey: '',

  // I18N import 语句,请按照自己项目情况配置
  importI18N: "import I18N from '@/i18n';",
  // import 语句后缀,用于判断是否已经引入过
  i18nPath: '@/i18n',

  // 可跳过的文件夹名或者文加名,比如docs、mock等
  ignoreDir: [],
  ignoreFile: [],

  // 导出未翻译的文案,Excel 列的配置
  exportColConfig: ['export_path', '业务线', 'business_key', '描述(字典值)', '语料类型', '最长字符', '首字母大写', '语料说明图', 'translatable', 'formatted', 'zh_CN'],
  // 导出未翻译的文案,业务线、key、文案在 Excel 中列的索引
  exportColIndexMap: {
    businessLine: 1,
    key: 3,
    text: 10,
  },
  // 导入翻译好的文案,key、文案在 Excel 中列的索引
  importColIndexMap: {
    key: 4,
    text: 12,
  },
  // 语料平台 xlsx 文件配置,列从 0 开始
  checkColIndexMap: {
    key: 3, // key 所在列
    'zh-CN': 11, // 中文所在列
    en: 12, // 英文所在列
  },
  // 语料文件 prettier 配置
  prettierConfig: {},
}

vics one

一键提取并替换指定文件夹、指定层级(默认为 0)下的所有中文文案,可以指定语料文件(默认为指定文件夹名字)

vics one [dirPath] [level] [langFilename]

vics extract

提取指定文件夹、指定层级(默认为 0)下的所有中文文案,可以指定语料文件(默认为指定文件夹名字)

vics extract [dirPath] [level] [langFilename]

vics replace

替换指定文件夹、指定层级(默认为 0)下的所有中文文案,可以指定语料文件(默认为指定文件夹名字)

vics replace [dirPath] [level] [langFilename]

vics sync

同步各种语言的文案,使用百度翻译 mock 语料

vics sync

vics export

导出未翻译的文案

# 导出指定语言的中文文案,lang取值为配置中distLangs值(lang 参数必填),如 en 就是导出还未翻译成英文的中文文案。可以指定业务线和产物文件名
# 导出范围:range // 0 未翻译,2 全部
vics export [lang] [range] [businessLine] [outputFilename]

vics import

将翻译好的文案,导入到项目中

# 导入送翻后的文案
vics import [lang] [filePath]

vics moveRules

将 rules 从 data 移动到 computed,用来解决 rules 多语言不生效问题

# 将 rules 从 data 移动到 computed
vics moveRules [dir/file...]

vics check

比较翻译平台管理的语料、代码中使用的语料之间的差异

# 校验对比语料
vics check [filePath]

语料平台 xlsx 文件配置,列从 0 开始,编辑 vics-config.json checkColIndexMap 字段

  checkColIndexMap: {
    key: 3, // key 所在列
    'zh-CN': 11, // 中文所在列
    en: 12, // 英文所在列
  }

vics 解决了哪些问题

  • 解决 vue 项目国际化过程中,中文文案手动替换费时费力问题
  • 在翻译过程中,可以使用 vics 命令行自动提取未翻译中文词汇,导出成 Excel 方便与翻译同学协作。针对翻译同学还没有返回翻译文案的期间,可以使用 vics 的 sync 和 mock 功能,先临时翻译成对应语言,节省文案调整时间
  • 国际化文案翻译完成后,可以使用 vics 的 import 命令,一键导入到项目文件内
  • 比较翻译平台管理的语料、代码中使用的语料之间的差异,主要提供给测试同学使用

Authors

License

  • MIT

About

vue 项目国际化全流程解决方案: 一个命令行工具,对代码里的中文文案一键完成提取、替换、翻译、导入、导出等,告别手动操作

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages