vue3-ts-vite：Google 多语言调试 / 网页中插入谷歌翻译元素 / 翻译

叁歲伎倆 2024-03-01 06:11 19阅读 0赞

#### 一、实现目标 ####

![0399c5df0db04acb941ca4d674fc440f.png][]

![8dd5e0ca239c4103aee46c312b549f66.png][]

#### 二、代码实现 ####

##### 2.1、项目vue3 - ts - vite #####

##### 2.2、index.html 引入文件 #####

##### 2.3、src/views/translate/index.vue #####

##### 2.4、测试成功 #####

#### 三、代码集成在一个页面 ####

<template>
      <div class="container">
        <div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>
        <div>google_translate_element</div>
      </div>
    </template>
    
    <script setup lang="ts" name="keepalive">
    // 加载script
    const loadScript = () => {
      let script = document.createElement('script')
      script.setAttribute("language", "javascript")
      script.setAttribute("type", "text/javascript")
      script.setAttribute("src", 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit')
      document.getElementsByTagName('head')[0].appendChild(script)
      script.onload = script.onreadystatechange = ((res:any)=>{
        check()
      })
    }
    loadScript()
    
    // 检测是否获取到google
    const check = () => {
      console.log("10", google.translate.TranslateElement)
      if(!google.translate.TranslateElement){
        setTimeout(()=>{
          check()
        }, 200)
      } else {
        translate()
      }
    }
    
    // 翻译
    const translate = () => {
      new google.translate.TranslateElement(
        {
            // pageLanguage: 'zh-CN',
            // 需要翻译的语言，比如你只需要翻译成英语，这里就只写en
            includedLanguages: 'en,zh-CN,hr,cs,da,nl,fr,de,el,iw,hu,ga,it,ja,ko,pt,ro,ru,sr,es',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            // 自动显示翻译横幅，就是翻译后顶部出现的那个
            autoDisplay: true,
            // 还有些其他参数
        },
        'google_translate_element' // 触发元素的id
      )
    }
    </script>
    
    <style scoped lang="less">
    </style>

#### 四、过程记录 ####

必须科学上网，否则访问不到依赖文件

https://translate.google.com/translate\_a/element.js?cb=googleTranslateElementInit

#### 五、参考连接 ####

[js获取浏览器默认语言设置\_js如何获取谷歌首选语言信息-CSDN博客][js_js_-CSDN]

[记录|给网站添加谷歌多语言翻译插件 - Jialezi \`s blog][- Jialezi _s blog]

[利用Google翻译实现网站国际化——js插件 - 灰信网（软件开发博客聚合）][Google_js_ -]

[网页嵌入谷歌翻译js插件 - 代码先锋网][js_ -]

[0399c5df0db04acb941ca4d674fc440f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/5c88ac582de744c9a20a72c9981fe9e7.png
[8dd5e0ca239c4103aee46c312b549f66.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/125ab496cd4147f79b8ccdeca8fe9411.png
[js_js_-CSDN]: https://blog.csdn.net/qq_26212731/article/details/78457198/
[- Jialezi _s blog]: https://blog.jialezi.net/?post=176
[Google_js_ -]: https://www.freesion.com/article/10615483/#google_vignette
[js_ -]: https://codeleading.com/article/89052760357/#google_vignette