关于Vue项目导入谷歌翻译api

index.html

  <script src="<%= BASE_URL %>googleTrans/js/element.js?cb=googleTranslateElementInit"></script>
  <script>
    setTimeout(()=>{
          // eslint-disable-next-line no-undef
    new google.translate.TranslateElement(
      {
        // 这个参数不起作用，看文章底部更新，翻译面板的语言
        // pageLanguage: 'zh-CN',
        // 这个是你需要翻译的语言，比如你只需要翻译成越南和英语，这里就只写en,vi
        // includedLanguages: 'de,hi,lt,hr,lv,ht,hu,zh-CN,hy,uk,mg,id,ur,mk,ml,mn,af,mr,uz,ms,el,mt,is,it,my,es,et,eu,ar,pt-PT,ja,ne,az,fa,ro,nl,en-us,en,en-GB,no,be,fi,ru,bg,fr,bs,sd,se,si,sk,sl,ga,sn,so,gd,ca,sq,sr,kk,st,km,kn,sv,ko,sw,gl,zh-TW,pt-BR,co,ta,gu,ky,cs,pa,te,tg,th,la,cy,pl,da,en',
        includedLanguages: 'zh-CN,en,en-GB,de,fr,ru,ja,hi,ko',
        // 选择语言的样式，这个是面板，还有下拉框的样式，具体的记不到了，找不到api~~
        // eslint-disable-next-line no-undef
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
        // 自动显示翻译横幅，就是翻译后顶部出现的那个，有点丑，这个属性没有用的话，请看文章底部的其他方法
        autoDisplay: true
        // 还有些其他参数，由于原插件不再维护，找不到详细api了，将就了，实在不行直接上dom操作
      },
      'trans'// 触发按钮的id
    )
    document.getElementsByClassName('goog-te-gadget-icon')[0].remove()
    document.getElementsByClassName('goog-te-menu-value')[0].remove()
    },2000)
  </script>
  <style type="text/css">
    .amap-logo {
      display: none;
      opacity: 0 !important;
    }

    .amap-copyright {
      opacity: 0;
    }

    /*覆盖原有按钮样式*/
    .goog-te-gadget-simple {
      background-color: transparent !important;
      border-left: 0px !important;
      border-top: 0px !important;
      border-bottom: 0px !important;
      border-right: 0px !important;
      font-size: 10pt !important;
      display: inline-block !important;
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      cursor: pointer !important;
      zoom: 1 !important;
      *display: inline !important;
      width: 40px;
      height: 40px;
    }
    .goog-tooltip.skiptranslate{
      display: none !important;
    }
    /*去除翻译后鼠标移到正文的hover显示*/
    .goog-text-highlight {
      background-color: transparent !important;
      -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;
      -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;
      box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;
    }

    /*解决问题1*/
    .goog-te-banner-frame {
      display: none
    }
  </style>

header或其他地方

<div class="cleanTrans" @click="cleanTrans">清除翻译</div>
<div id="trans" class="trans" />
<script>
cleanTrans() {
      this.delCookie('googtrans')
      window.location.reload()
},
</script>

静态js文件

链接: https://pan.baidu.com/s/1nIEfzUHovUW6hOjlTRlcWg 提取码: a9m7

在element.js里需要在最开头加上

var gtConstEvalStartTime = new Date();
var resourcesUrl = '/googleTrans';
var allLanguage = 'de,hi,lt,hr,lv,ht,hu,zh-CN,hy,uk,mg,id,ur,mk,ml,mn,af,mr,uz,ms,el,mt,is,it,my,es,et,eu,ar,pt-PT,ja,ne,az,fa,ro,nl,en-GB,no,be,fi,ru,bg,fr,bs,sd,se,si,sk,sl,ga,sn,so,gd,ca,sq,sr,kk,st,km,kn,sv,ko,sw,gl,zh-TW,pt-BR,co,ta,gu,ky,cs,pa,te,tg,th,la,cy,pl,da,tr'.split(',');
var localLanguage;
if (navigator.language) {
  localLanguage = navigator.language;
}
else {
  localLanguage = navigator.browserLanguage;
}
console.log("当前语言环境"+localLanguage);
//检查是否支持此语言翻译，不支持就把面板设为中文，或你想要的语言，只能是以上80种语言之一
if(allLanguage.findIndex(item=>item===localLanguage)===-1){
  localLanguage = "en";
}

谷歌翻译api效果