网站多语言前端翻译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页面引入
<script src="https://cdn.staticfile.net/translate.js/3.4.2/translate.js"></script>
<script>
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();
};
</script>
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’);
