网站多语言前端翻译translate.js 在vue项目中的使用方法

网站多语言前端翻译translate.js 在vue项目中的使用方法

需求

客户网站，想要多语言版本的，通常的解决办法有两种：

1、最直接的办法：编写两种，或者多种语言版本的网站，也就是一个网站有几种语言，就重新编写几种对应的html模板，常用于中英文网站，语言版本较少的情况

2、因为客户语言版本较多，所以第一种方法就不太适用了，百度查找了一段时间，发现了一个神奇的翻译工具

translate.js 前端翻译：【两行js实现html全自动翻译。无需改动页面、无语言配置文件、无API Key、对SEO友好！】

前端翻译：https://translate.zvo.cn/41162.html

能力一：前端翻译

加入一个js文件及两行js代码，即可让你现有页面具有几百种语种切换能力。零门槛！详细参见 translate.js

能力二：翻译html的能力

传入html源码，指定要范围为什么语种，能将翻译之后的html源码返回。详细参见 translate.api

能力三：整站翻译及独立绑定域名 （TCDN）

将您现有的网站，翻译成全新其他语种网站，可以绑定域名并支持搜索引擎收录和排名。基于现有网站，无需改动源站，翻译全站网页，绑定独立域名，保证搜索收录。

详细参见 TCDN

根据需求，我的项目直接使用第一种前端翻译就能实现了！

index.html页面引入

  
     
  window.onload = function() {
      // 页面完全加载后执行的代码
      console.log('页面已加载完毕！');
      translate.language.setDefaultTo('chinese_simplified'); //设置本地语种（当前网页的语种）。如果不设置，默认就是 'chinese_simplified' 简体中文。 可填写如 'english'、'chinese_simplified' 等，具体参见文档下方关于此的说明
      translate.selectLanguageTag.languages = 'english,chinese_simplified,portuguese,french'
      translate.language.translateLanguagesRange = ['chinese_simplified'];
      //translate.setDocuments(document.getElementById('app'))
      translate.service.use('client.edge'); 
      translate.listener.start();    //开启html页面变化的监控，对变化部分会进行自动翻译。注意，这里变化区域，是指使用 translate.setDocuments(...) 设置的区域。如果未设置，那么为监控整个网页的变化
      translate.selectLanguageTag.show = false;   //是否显示 select选择语言的选择框，true显示； false不显示
      //translate.execute();      ///在vue页面中使用 window.translate.execute();
  }; 
  

vue页面中调用

onMounted(async ()=>{
  console.log('onMounted开始')  
  lang.value=window.sessionStorage.getItem('lang')
  //其它方法
  //最后执行翻译
  window.translate.execute()
  console.log("onMounted结束")
})

注意：

1、在index.html中引入translate.js配置

2、在vue中需要翻译的地方执行：window.translate.changeLanguage(‘english’);

3、执行一定放到最后内容渲染完了，再执行，防止翻译漏了内容

如果在vue里面进行调用，比如你vue页面中有个切换语言的按钮，点击后进行切换为某种语言，千万不要在vue页面中引入 translate.js ，这样会造成重复引入重复翻译， vue中使用时只需要前面加个windows就好了，

比如 主动进行语言切换 不是vue的情况正常使用是 translate.changeLanguage(‘english’);

而在vue代码中触发则是 window.translate.changeLanguage(‘english’);