vue项目实现多语言切换的思路

Web 项目多语言(i18n,即国际化)是比较常见的需求,常规的做法大概有以下几种:

  1. 每种语言单独开发页面,适用于 CMS 之类的网站
  2. 多语言文本和页面结构分离,运行时动态替换。适用于单页应用(SPA)
  3. 直接用网页翻译插件,机器翻译。这种效果不太理想,同时有一些局限性(后面会讲到)

问题

每一种方案都有各自的优点和局限性,具体项目应该根据实际情况选择。最近在工作中碰到的需求是要在现有的项目基础上快速推出多语言版本。项目是基于 Vue.js 开发的,已经迭代过很多版本了。其实一开始是有规划多语言的,也引进了 vue-i18n 插件。这个插件就是上面第二种方案,用 JSON 文件管理多语言的文本资源,在 Vue 组件模板里通过键名引用文本。但是要管理这些英文键名比较麻烦,命名就很头疼。而且阅读代码的时候也很难从键名快速识别出对应的中文。后面发现 VS Code 有相关的插件,可以显示出对应的中文,但是代码找起来还是有点麻烦。再加上产品的多语言版本一直没有提上日程,时间久了就嫌麻烦,慢慢地就直接在模板里写中文了。

结果,该来的还是来了。老板突然说最近要推出英文版,后续还有其他语言。一开始的想法是直接用 Chrome 浏览器自带的 Google 翻译功能,怎么快怎么来。但经过一番测试,发现了不少问题。首先机翻的效果肯定是要打折扣的,但这还在接受范围内。最关键的是会影响到功能使用。什么问题呢?由于项目是用 Vue.js 开发的单页应用,页面内容完全是用 JS 动态渲染的。有些对话框内的文字 Google 翻译就忽略了。另外,Google 翻译只处理了 DOM 文本节点,input输入框内的文字(包括placeholder)被忽略了。最严重的问题是,经过 Google 翻译处理后的 DOM 元素,竟然失去了 Vue 响应式特性,数据变化后 DOM 内的文字不会更新了!

如果要继续采用浏览器 Google 翻译的方案,就要解决这几个问题。通过调试发现 Google 翻译用的 JS 脚本是嵌入到浏览器 VM 里的,通过 HTTP 调用翻译服务,然后修改 DOM 元素。JS 脚本是压缩混淆过的,格式化后也很难看。想要找到更新 DOM 的代码,然后用自己的逻辑去覆盖?眼睛都看瞎了,还是算了。

鉴于以上原因,浏览器自带的 Google 翻译方案基本不考虑了。

现在只剩下第二种方案了,语言配置文件和页面结构分离。前面提过,vue-i18n用得不彻底,如果把所有组件重新规范化,工作量太大了。有没有办法不修改现有代码,也能实现文本翻译呢?很自然地就想到了 Google 翻译的思路,直接对页面渲染结果进行翻译。自己翻译的优势就是,可以精细地控制 DOM 操作,比如可以把输入框里的文本和placeholder也翻译出来。同时,经过研究发现,Vue 组件通过数据绑定渲染出来的 DOM 元素,包含的文本内容不能直接通过 innerHTML或者innerText修改,这样会导致响应式失效。解决办法是操作它的子元素,也就是文本节点(nodeType为3的节点),修改它的 textContent属性。

多语言配置映射表

跟 Google 翻译不同之处在于,我们采用静态翻译,也就是通过多语言配置文件映射。 vue-i18n 是每种语言准备一个 JSON 文件,属性名用英文,用命名空间(多层级对象)的方式避免命名冲突。我直接简化了,用一个 JS 对象存储所有语言版本,键名就是页面用到的中文。随着日积月累的开发迭代,这些中文散落在几百个文件里……我的做法是用 VS Code 全局正则搜索,把查找结果复制出来,写一个 JS 方法把这些字符串处理成 JS 对象。

匹配中文的正则(不够全面,有些还夹杂了其他符号):

[A-Z]*[\u4e00-\u9fa5][,,!! 0-9a-zA-Z\u4e00-\u9fa5]*

将结果复制到翻译工具翻译,再写一个函数把这些文本合并成对象,并保存到labels.js文件中备用。

var kv = dist.reduce((acc,cur, index) => {
acc[cur]=en[index] || cur;return acc;
},{})

对象的结构大致如下:

// labels.js
export default {
 客户性名: {
  en: 'Customer Name',
 },
 // 动态文本,后面会讲到
 '剩余{0}台矿机未登记': {
  en: '{0} unregistered',
 },
 xxxx: {
  en: 'XXX',
 }
}

操作 DOM

跟 Google 翻译类似,我们也采取事后更新 DOM 的方式来进行翻译。由于是单页应用,随着用户的操作,会不停地更新 DOM。一开始的想法是监听整个 body的变化,在回调里再更新 DOM。监听 DOM 变化有一个原生的 API 可用,就是 MutationObserver。

mounted() {
 this.observeDOM(document.body);
},
methods: {
 observeDOM(el) {
  let mutationTimer;
  const vm = this;
  const observer = new MutationObserver(() => {
   // 类似于 debounce 的效果,多次调用合并为一次
   clearTimeout(mutationTimer);
   mutationTimer = setTimeout(() => {
    if (!vm.mutationFromTrans) {
     translate();
     vm.mutationFromTrans = true;
     setTimeout(() => {
      vm.mutationFromTrans = false;
     }, 300);
    }
   }, 100);
  });
  const options = {
   childList: true, // 监视node直接子节点的变动
   subtree: true, // 监视node所有后代的变动
   attributes: true, // 监视node属性的变动
   characterData: true, // 监视指定目标节点或子节点树中节点所包含的字符数据的变化。
  };
  if (this.language === 'en') {
   observer.observe(el, options);
  }
 },
}

但是试过之后发现这会导致无线循环,因为没有判断 DOM 的变化来自用户操作还是翻译本身。所以代码里后面加了判断,但是结果依然不理想。这种操作代价太大了,页面性能受了很大影响。而且还有个很明显的问题,就是进入到新的界面会闪一下,从中文变成英文。这个体验太糟糕了。后面有改进办法。

翻译

先来来看下翻译的过程。翻译就是从多语言配置对象里查找匹配的属性名,获取对应语言的属性值。这对于静态文本来说比较简单,直接用属性名就好了。但是对于动态的文本怎么处理呢?由于中英文表达方式不一样,这种文本不能简单地拆分成多个部分单独处理,而是要在英文的表达方式里替换动态数据。我的做法是使用带格式的键名,比如{0}这样的占位符。在查找的时候,优先匹配固定文本。因为大部分情况是固定文本,而且这种匹配是O(1)时间复杂度的,优先判断会提高性能。匹配失败的时候才去提前构造好的正则列表里遍历匹配,成功则提取正则匹配的group用于替换动态数据。如果失败,说明没有对应的翻译,直接返回原始字符串就行了。

const keys = Object.keys(words);
// 提前缓存正则,避免重复执行消耗性能
const regExps = keys.reduce((acc, key) => {
 // 模板型键名
 if (key.indexOf('{0}') > -1) {
  const reg = new RegExp(key.replace('{0}', '(.+)'));
  acc.push({
   expression: reg,
   key,
  });
 }
 return acc;
}, []);
export function translate(el = document.body, lang = 'en') {
 const kv = words;
 if (!el.querySelectorAll) {
  return;
 }
 const _trans = label => {
  const text = label?.trim?.();
  if (!text) {
   return label;
  }
  if (kv[text]?.[lang]) {
   return kv[text]?.[lang];
  }
  for (let index = 0; index < regExps.length; index++) {
   const regItem = regExps[index];
   const m = text.match(regItem.expression);
   if (m) {
    return kv[regItem.key][lang].replace('{0}', m[1]);
   }
  }
  return text;
 };
 [...el.querySelectorAll('*')].forEach(node => {
  // 不能直接修改node.innerText,会导致Vue响应式失效
  // node.innerText = kv[node.innerText?.trim?.()] || node.innerText;
  if (node.nodeName === 'INPUT' && node.type === 'text') {
   node.value = _trans(node.value);
   node.placeholder = _trans(node.placeholder);
  }
  const textNodes = [...node.childNodes].filter(n => n.nodeType === 3);
  textNodes.forEach(textNode => {
   textNode.textContent = _trans(textNode.textContent);
  });
 });
}

改进后的 DOM 操作

前面提过,如果在 DOM 渲染后再执行翻译,页面性能非常差。于是想到了 Vue 本身的渲染过程,能不能拦截 Vue 组件渲染过程,插入一些额外的逻辑呢?通过扒源码发现,Vue 原型上有个__patch__方法,每次更新 DOM 的时候都会执行。就从这里入手, 重写这个方法,对还没挂载到文档树的 DOM 元素执行翻译操作。

const __patch__ = Vue.prototype.__patch__;
Vue.prototype.__patch__ = function() {
 const elm = __patch__.apply(this, arguments);
 if (this.$store?.getters?.language) {
  translate(elm, this.$store?.getters?.language);
 }
 return elm;
};

至此,基本完成了多语言翻译。经过权衡对比,这个方案算是比较省时省力又能完成需求的了。当然,这种方案或多或少对页面性能有一定影响,毕竟增加了 DOM 更新的时间。尤其是动态文本较多的情况,涉及到遍历正则匹配,比较耗时。如果大家有更好的方案,欢迎留言!

以上就是vue项目实现多语言切换的思路的详细内容,更多关于vue项目多语言切换的资料请关注我们其它相关文章!

(0)

相关推荐

  • 利用vue-i18n实现多语言切换效果的方法

    前言 有些项目我们需要支持多种语言切换,满足国际化需求. vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化.本文主要介绍使用vue-i18n实现切换中英文效果. 安装vue-i18n 我们使用npm安装vue-i18n. npm install vue vue-i18n --save 引入vue-i18n 首先在 main.js 中引入 vue-i18n. import Vue from 'vue' import App from

  • vue与vue-i18n结合实现后台数据的多语言切换方法

    在XXX.js文件中定义函数: getUser(context,info){ context.$http.get(SERVER_URL+'/users',info).then(function(data){ let err =data.body.error; if(err===0){ let dataObj = data.body.userLists; //获取后台返回的数据 this.users = dataObj.items.map(function (e,i) { //遍历获取的数据,用t

  • Vue中使用vue-i18插件实现多语言切换功能

    在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下: step1: 在项目中安装vue-i18插件 cnpm install vue-i18n --save-dev step2:在项目的入口文件main.js中引入vue-i18n插件  import Vue from 'vue' import router from './router' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n

  • vue项目实现多语言切换的思路

    Web 项目多语言(i18n,即国际化)是比较常见的需求,常规的做法大概有以下几种: 每种语言单独开发页面,适用于 CMS 之类的网站 多语言文本和页面结构分离,运行时动态替换.适用于单页应用(SPA) 直接用网页翻译插件,机器翻译.这种效果不太理想,同时有一些局限性(后面会讲到) 问题 每一种方案都有各自的优点和局限性,具体项目应该根据实际情况选择.最近在工作中碰到的需求是要在现有的项目基础上快速推出多语言版本.项目是基于 Vue.js 开发的,已经迭代过很多版本了.其实一开始是有规划多语言的

  • Vue.js项目前端多语言方案的思路与实践

    目录 一.通常有哪些内容需要处理 二.基本思路 三.具体实践中的一些细节 1.获取当前应该采用何种语言的getLang模块的实现 2.Vux组件的多语言包的配置 3.vux-loader的配置 4.自定义组件内外文案的多语言化 5.vuex-i18n的实现 6.图片的多语言化 7.在当前页面通过按钮切换当前语言后,如何更新当前页面的内容? 8.Yaml中特殊字符的转义 总结 前端的国际化是一个比较常见的需求.但网上关于这一方面的直接可用的方案却不多.最近刚做了一版基于Vue.js的多语言实现,在

  • 详解vue element plus多语言切换

    目录 前言 如何实现多语言切换 ? 1.安装包vue-i18n 2.在src目录下新建如图: 3. 在main.js中 4.在vue文件中使用 如何动态切换语言并更改elementUI语言 ? 1.利用vuex,在mutations中写一个方法更改element语言 2.使用 更改完elementUI组件视图不更新? 1. 在router-view上控制视图显示/隐藏 2. 在切换语言时调用reload 3.需在main.js中调用一下commit,不然第一次进入elementUI 不会更改语言

  • Vue项目数据动态过滤实践及实现思路

    这个问题是在下在做一个Vue项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -.-),过程中会涉及到一些Vue源码的概念比如 $mount . render watcher 等 问题是这样的:页面从后台拿到的数据是由 0 . 1 之类的key,而这个key代表的value比如 0-女 . 1-男 的对应关系是要从另外一个数据字典接口拿到的:类似于这样的Api: { "SEX_TYPE": [ { "paramValue":

  • 解决ios微信下vue项目组件切换并自动播放音频问题

    最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页 和结束页面 ,答题页关于每种题型 , 我做了相应的组件 , 每次切换题目的时候 ,显示对应的的组件 , 要求听音选图的时候会自动播放音频 . 惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridg

  • Vue项目全局配置微信分享思路详解

    这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库 全局配置微信分享思路 1.区分一般和特殊,一般情况,全局配置默认分享文案:特殊情况分两种,一种是分享内容不需要异步获取,则在

  • 使用vue 国际化i18n 实现多实现语言切换功能

    安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { home: { helloworld: "hello workd !" } }; zh.js export default { home: { helloworld: "你好世界" } }; index.js 创建Vue-i18n实例 import Vue from &qu

  • Vue项目中添加锁屏功能实现思路

    1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localStorage) ( 3 ) vuex设置 SET_LOCK state.isLock = true (为true是锁屏状态) ( 4 ) 在路由里面判断vuex里面的isLock(为true锁屏状态不能让用户后退url和自行修改url跳转页面否则可以) (1)设置锁屏密码 handleSetLock() { this.$refs['form'].v

随机推荐