vue-i18n-inject

vue 文本国际化工具

说明

针对 vue 项目，自动分析目录下文件里出现的中文语句，并将文件中包含中文语句的表达式、属性、参数等元素注入国际化函数，同时生成字典文件

工具转换直接对表达式进行分析，支持中英文混合的情况

本工具只将语句进行函数包装，需要在项目里手动引用vue-i18n库

js 文件的中文

分析 js 语句的中文语句，包括：变量定义,对象属性,布尔表达式,逻辑表达式,函数返回值,函数调用,对象实例化表达式

vue 文件的中文

分析 vue 模板中的中文语句，包括元素属性、元素绑定属性、元素内容

支持元素内容带换行的文本

转换前:

<div>
  中文1
  中文2
</div>

转换后:

<div>
  {{ $t('中文1') }}
  {{ $t('中文2') }}
</div>

支持元素内容与表达式混合的情况

转换前:

<div>
  中文1 {{ func('参数') }} test
</div>

转换后:

<div>
  {{ $t('中文1') }} {{ func($t('参数')) }} test
</div>

支持元素绑定属性

转换前:

<div>
  <span label="中文" :props="{ test: '中文', func: getText('中文') }"></span>
</div>

转换后:

<div>
  <span label="中文" :props="{ test: $t('中文'), func: getText($t('中文')) }"></span>
</div>

使用方法

先全局安装npm i vue-i18n-cli -g

在 vue 项目源码目录下执行vue-i18n，此操作会将处理该目录下包括子目录内所有 js 和 vue 文件，将包含中文语句的部分替换成国际化方法，同时在该目录下生成一个字典 json 文件