vue-translate-directive

v1.1.0更新

1. 新增v-trans-ignore指令，添加该指令的节点不会被检测
2. 支持初始化设定默认默认i18n数据和默认语言
3. 翻译接口支持传入变量

v1.0.8更新

1. 对已翻译过的节点进行标记，防止重复翻译，提高页面性能
2. 组件销毁前移除Observe观察

v1.0.7更新

1. 改进节点筛选逻辑，提高了性能
2. 解决组件被加载到body导致检测不到的问题
3. 针对可能没有被自动国际化替换的部分，向外提供了翻译接口

vue老项目国际化无压力

实现原理

业务相关国际化，通过vue3生命周期钩子，在页面挂载前，对dom进行遍历，对于目标文本(即配置的页面关键字)，通过匹配预先传入的国际化对象，如果有匹配值，则将目标文本替换为匹配的国际化值，从而完成静态页面的国际化替换。再通过Mutation Observer监视dom, 对于页面中变化的dom，通过同样的方法，进行国际化转换

安装

npm install vue-translate-directive

在main文件中引入

import vueTranslateDirect from 'vue-translate-directive'

...

app.use(vueTranslateDirective, {
  data: i18nData,
  locale: 'en'
})

入参说明

| 参数 | 说明 | | ------- | ------- | | data | 国际化数据，结构要求为{ en: {}, zh: {} } | | locale | 默认语言, 默认en, 同时会在浏览器sessionStorage中存储currentLang值，用于记录当前语言，如果要切换语言，请修改currentLang值 |

使用

使用时，在html页面根容器写加上v-trans, v-trans支持传入i18n的JSON数据对象。

国际化语言区分浏览器sessionStorage中存储的currentLang值，该值用于记录当前语言， 比如zh或者en。

支持在指令中传参

<div class="content" v-trans="{i18n: i18n}">

但是强烈建议在初始化时传入data对象，直接使用指令，后面不接数据，会默认使用初始化传入的数据。

<div class="content" v-trans>

实现过程

例如在原本的用户页面， 有个标签显示"姓名"

<span>姓名</span>

根据当前页面的关键字，比如'user',加上'name' 然后配置国际化JSON类型数据

// @/i18n/en/user.js
...

{ user: { name: 'Name' } }

// @/i18n/zh/user.js
...

{ user: { name: '姓名' } }

接在在页面中合入国际化对象

// @/i18n/locale.js
import en from '@/i18n/en/user.js'
import zh from '@/i18n/zh/user.js'

export const i18nData = {
    en: en,
    zh: zh
}

然后在main.js中引入并初始化

app.use(vueTranslateDirective, {
  data: i18nData,
  locale: 'en'
})

现在将用户页面修改为

<span>user/name</span>

并在用户页面的根节点div加上v-trans

<div class="user-page" v-trans>

翻译指令会先根据sessionStorage中存储currentLang值，判断需要替换的那种语言，假设当前currentLang为en, 然后翻译指令将文本替换为Name

刷新浏览器，最终结果为

<span>Name</span>

当然，也可以不需要在main.js中初始化，直接在页面中传参, 效果一样

<div class="user-page"  v-trans="{i18n: i18nData}">

v-trans-ignore

如果不想翻译当前元素节点，或者忽略当前元素，可以在元素内加上v-trans-ignore指令，那么当前元素及其子节点都将被翻译指令忽略

<div class="page-path" v-trans-ignore>

手动转换

对于需要在js中转换的文本，我们也对外提供了转换接口

import { translateKey }  from 'vue-translate-directive'

const translatedStr = translateKey('home/form/successTip')
console.log(translatedStr) // Added successfully

同时该接口也支持变量

// { common: { CUR_LANG_IS: '当前语言是{0}' } }

const language = '中文'
const translatedStr = translateKey('common/CUR_LANG_IS', language)
console.log(translatedStr); // 当前语言是中文