vue 或 js 使用谷歌翻译实现国际化

已于 2022-08-30 17:26:56 修改
阅读量5.8k 收藏 11
点赞数 2
分类专栏： vue js api的使用 文章标签： javascript vue.js 前端
于 2022-08-24 15:42:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43245095/article/details/126505068
版权

问题

一般没有适配国际化的页面 我们会使用谷歌翻译插件进行翻译。
但由于使用浏览器中的谷歌翻译插件 会导致dom的结构发生改变，从而导致 vue react与dom操作绑定关系失效！这样就无法触发跳转路由等操作。
下面的方法可以使得我们即使用谷歌翻译 又不会导致dom结构发生改变 兼容vue react(把vue代码改写一下)框架。

效果

hhh-google-translate
请添加图片描述

注意

而且选择语言时，切换语言最好先切换为源语言，再切换翻译语言，不然谷歌翻译会翻译错乱。

代码

hhh-google-translate 组件

这是我参考
利用Google翻译实现网站国际化——js插件
v-google-translate 写的。
目前有两个版本 切换组件的index.vue。 其中（ 翻译input提示内容 无法翻译），需要在public 的添加css及js 已放置在google-translate-vue中，可下载使用。
google-translate内容图片
在这里插入图片描述

demo 代码 如下

//hhh-google-translate 组件
<template>
  <div>
    <div id="google_translate_element"></div>
  </div>
</template>

<script>
// import googleElement from "./google-element";
export default {
  name: "hhh-google-translate",
  props: {
    // 语言列表
    languages: {
      type: Array,
      default() {
        // 遵循 ISO 639-1 标准，俩位的code
        // 参考：https://zh.wikipedia.org/wiki/ISO_639-1
        return [
          {
            code: "en",
            name: "English",
            cname: "英语",
            ename: "English",
          },
          {
            code: "af",
            name: "Afrikaans",
            cname: "南非语",
            ename: "Afrikaans",
          },
          {
            code: "sq",
            name: "Gjuha shqipe",
            cname: "阿尔巴尼亚语",
            ename: "Albanian",
          },
          {
            code: "ar",
            name: "العربية",
            cname: "阿拉伯语",
            ename: "Arabic",
          },
          {
            code: "hy",
            name: "Հայերեն",
            cname: "亚美尼亚语",
            ename: "Armenian",
          },
          {
            code: "az",
            name: "Азәрбајҹан дили",
            cname: "阿塞拜疆语",
            ename: "Azerbaijani",
          },
          {
            code: "eu",
            name: "Euskara",
            cname: "巴斯克语",
            ename: "Basque",
          },
          {
            code: "be",
            name: "беларуская мова",
            cname: "白俄罗斯语",
            ename: "Belarusian",
          },
          {
            code: "bg",
            name: "български език",
            cname: "保加利亚语",
            ename: "Bulgarian",
          },
          {
            code: "ca",
            name: "Català",
            cname: "加泰罗尼亚语",
            ename: "Catalan",
          },
          {
            code: "zh-CN",
            name: "Chinese (Simplified)",
            cname: "中文 (简体)",
            ename: "Chinese (Simplified)",
          },
          {
            code: "zh-TW",
            name: "Chinese (Traditional)",
            cname: "中文 (繁体)",
            ename: "Chinese (Traditional)",
          },
          {
            code: "hr",
            name: "Српскохрватски језик",
            cname: "克罗地亚语",
            ename: "Croatian",
          },
          {
            code: "cs",
            name: "čeština",
            cname: "捷克语",
            ename: "Czech",
          },
          {
            code: "da",
            name: "Danmark",
            cname: "丹麦语",
            ename: "Danish",
          },
          {
            code: "nl",
            name: "Nederlands",
            cname: "荷兰语",
            ename: "Dutch",
          },
          {
            code: "et",
            name: "eesti keel",
            cname: "爱沙尼亚语",
            ename: "Estonian",
          },
          {
            code: "tl",
            name: "Filipino",
            cname: "菲律宾语",
            ename: "Filipino",
          },
          {
            code: "fi",
            name: "Finnish",
            cname: "芬兰语",
            ename: "Finnish",
          },
          {
            code: "fr",
            name: "Français",
            cname: "法语",
            ename: "French",
          },
          {
            code: "de",
            name: "Deutsch",
            cname: "德语",
            ename: "German",
          },
          {
            code: "el",
            name: "Ελληνικά",
            cname: "希腊语",
            ename: "Greek",
          },
          {
            code: "hu",
            name: "magyar",
            cname: "匈牙利语",
            ename: "Hungarian",
          },
          {
            code: "id",
            name: "Indonesia",
            cname: "印度尼西亚语",
            ename: "Indonesian",
          },
          {
            code: "ga",
            name: "Irish",
            cname: "爱尔兰语",
            ename: "Irish",
          },
          {
            code: "it",
            name: "Italiano",
            cname: "意大利语",
            ename: "Italian",
          },
          {
            code: "ja",
            name: "にほんご",
            cname: "日语",
            ename: "Japanese",
          },
          {
            code: "ko",
            name: "한국어",
            cname: "韩语",
            ename: "Korean",
          },
          {
            code: "lt",
            name: "lietuvių kalba",
            cname: "立陶宛语",
            ename: "Lithuanian",
          },
          {
            code: "ms",
            name: "Malay",
            cname: "马来西亚语",
            ename: "Malay",
          },
          {
            code: "no",
            name: "norsk",
            cname: "挪威语",
            ename: "Norwegian",
          },
          {
            code: "pl",
            name: "Polski",
            cname: "波兰语",
            ename: "Polish",
          },
          {
            code: "pt",
            name: "Português",
            cname: "葡萄牙语",
            ename: "Portuguese",
          },
          {
            code: "ro",
            name: "limba română",
            cname: "罗马尼亚语",
            ename: "Romanian",
          },
          {
            code: "ru",
            name: "Русский",
            cname: "俄语",
            ename: "Russian",
          },
          {
            code: "es",
            name: "Español",
            cname: "西班牙语",
            ename: "Spanish",
          },
          {
            code: "sv",
            name: "Swedish",
            cname: "瑞典语",
            ename: "Swedish",
          },
          {
            code: "th",
            name: "ภาษาไทย",
            cname: "泰语",
            ename: "Thai",
          },
          {
            code: "tr",
            name: "Turkish",
            cname: "土耳其语",
            ename: "Turkish",
          },
          {
            code: "uk",
            name: "українська мова",
            cname: "乌克兰语",
            ename: "Ukrainian",
          },
        ];
      },
    },
    //默认页面源语言 code
    defaultPageLanguageCode: {
      type: String,
      default: "auto",//zh-CN  简体中文
    },
  },
  data() {
    return {};
  },
  created() {},
  computed: {
    includedLanguages() {
      if (this.languages && this.languages.length) {
        let languagesList =
          this.languages.map((item) => {
            return item.code;
          }) || [];
        return languagesList.join(",");
      }
      return "";
    },
  },
  mounted() {
    window.googleTranslateElementInit = () => {
      //记录 谷歌翻译是否已经初始化
      window.hhhTransLateInit = true;
      console.log("window.google.translate", window.google.translate);
      // new window.google.translate.TranslateElement({ pageLanguage: this.defaultPageLanguageCode, autoDisplay: false }, "google_translate_element");
      new window.google.translate.TranslateElement(
        { pageLanguage: this.defaultPageLanguageCode, includedLanguages: this.includedLanguages, autoDisplay: true, layout: google.translate.TranslateElement.InlineLayout.SIMPLE },
        "google_translate_element"
      );
    };
    console.log("window.hhhTransLateInit", window.hhhTransLateInit);
    //如果谷歌翻译已经初始化 
    if (window.hhhTransLateInit) {
      // 重新渲染到 google_translate_element 上
_loadJs("https:\/\/translate.googleapis.com\/_\/translate_http\/_\/js\/k\x3dtranslate_http.tr.zh_CN.QLOO522nbPo.O\/d\x3d1\/exm\x3del_conf\/ed\x3d1\/rs\x3dAN8SPfrH_TG1Vgc2X6ozBFVgRhW67pLkSQ\/m\x3del_main");
    }
    // if (window.google.translate.TranslateElement) {
    //   new window.google.translate.TranslateElement({ includedLanguages: this.includedLanguages, autoDisplay: false, layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, "google_translate_element");
    // }
    this.dynamicLoadJs("//translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit");
  },
  methods: {
    // 动态加载js文件
    dynamicLoadJs(jsUrl, fn = () => {}, errorCallBack = () => {}, jsId = "") {
      const scriptList = document.querySelectorAll("script");
      console.log("scriptList", scriptList);
      const isLoad = [...scriptList].find((item) => {
        return item.getAttribute("src") == jsUrl;
      });
      console.log("isLoad", isLoad);
      if (!isLoad) {
        const _doc = document.querySelector("body");
        const script = document.createElement("script");

        script.onload = script.onreadystatechange = function() {
          console.log("this.readyState", this.readyState);
          //   加载成功
          if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
            fn && fn();
          }
          // 加载失败
          if (!this.readyState || ((this.readyState === "loaded" || this.readyState === "complete") && !window["_DumpException"])) {
            errorCallBack && errorCallBack();
          }
          script.onload = script.onreadystatechange = null;
        };
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", jsUrl);
        jsId && script.setAttribute("id", jsId);
        _doc.appendChild(script);
      }
    },
  },
};
</script>

<style>
body {
  top: 0 !important;
}
.skiptranslate iframe {
  display: none;
}

/* 去除查看原文 */
#goog-gt-tt {
  display: none !important;
}
/* 去除选择文字高亮 */
.goog-text-highlight{
  background-color: inherit !important;
  box-shadow: none !important;
}
#google_translate_element {
  /* width: 150px; */
  /* display: flex; */
  /* position: absolute;
  top: 0;
  right: 0;
  z-index: 2000;
  opacity: 0.7; */
}

#google_translate_element .goog-te-gadget {
  width: 100%;
  height: 100%;
}
#google_translate_element .goog-te-gadget .goog-te-gadget-simple {
  background-color: transparent;
  border: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
/* 去除重复的内容 */
/* #google_translate_element .goog-te-gadget .goog-te-gadget-simple span:nth-of-type(n + 2) {
  display: none;
}
#google_translate_element .goog-te-gadget .goog-te-gadget-simple img:nth-of-type(n + 2) {
  display: none;
} */
/* #google_translate_element .goog-te-menu-value:first-child {
  display: inline-block;
} */
#google_translate_element .goog-te-menu-value :nth-child(n + 2) {
  display: none;
}
#google_translate_element .goog-te-menu-value img {
  width: 1em !important;
  height: 1em !important;
}
/* .skiptranslate {
  display: none !important;
} */
</style>

使用

// 如果想全局先引入 谷歌的element.js文件 请在 index.html 添加以下script
//index.html
  <div id="app"></div>
  <script async src="//translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>

//使用
<hhh-google-translate />
v-google-translate 组件
yarn add v-google-translate
npm i v-google-translate

使用

// main.js
import vGoogleTranslate from "v-google-translate";
Vue.use(vGoogleTranslate);

// xxx.vue
<template>
  <div>
  <v-google-translate />
  <div>
</template>

不过使用 npm 安装 可能会报错

gyp ERR! find Python 
gyp ERR! find VS msvs_version not set from command line or npm config

缺少python 环境 缺少c++环境
如果报错建议去github下载源码
具体参考 v-google-translate

这两个组件都可以通过 添加 notranslate 类名，这样谷歌翻译将不会翻译该元素内文字

<a :href="href" class="navbar-brand  notranslate">不翻译的字</a>
网页嵌入谷歌浏览翻译js插件
09-16
谷歌网页翻译插件，资源本地化无需翻墙。
多语言自动翻译js脚本 中文翻译英文 谷歌自动翻译 全站翻译 页面翻译 整站翻译 本地翻译
04-19
使用谷歌翻译js实现页面自动翻译，可设置默认语言，可以自定义翻译方式交互，脚本经过测试可用，实现修改简单，无太多耦合，嵌入代码简单，注意：由于已知原因，谷歌只支持外网访问，项目需要引入jq，其他都不需要第三方，无key，本地部署
「Web」前端篇 之 网页实现翻译的几种方式
最新发布
何曾参静谧的博客
11-27 684
可以通过调用在线翻译API（如谷歌翻译API、百度翻译API等）来实现网页的中英文转换。这些API通常提供了丰富的翻译功能，包括文本翻译、网页翻译等。
推荐一款基于 JavaScript 的翻译工具库！5行代码，1秒实现网页多语言翻译！（带私活源码）
m0_68103666的博客
10-20 774
这是一个免费、开源的翻译工具库，支持多种语言之间的互译，如中英文、法文、日语、韩语、德语等。它避免了API调用次数的限制和费用问题，且使用方法简单，方便快捷。利用translate.js，我们就可以轻松实现网站国际化，让不同国家和地区的用户都能够方便地使用我们的网站。
利用Google翻译实现网站国际化——js插件.rar
09-25
此资源有误已作废，请查看最新的资源：https://blog.csdn.net/wokuailewozihao/article/details/82021709
js利用google翻译接口把网页翻译成各国语言
12-09
利用JS实现网页的在线自动google翻译
js 利用谷歌翻译实现国际化
潘敬
05-07 4514
function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage : 'en', autoDisplay : false, gaTrack : true, layout : google.translate.TranslateElement.
Vue项目引入translate.js 国际化自动翻译组件
weixin_46607967的博客
11-15 8918
建议 translate.js 配合 i18 使用本文只介绍 translate.js 的引入和使用方式无论什么库 在翻译上 都不会做到 （ 100%翻译 && 100%准确 ） 所以不要吹毛求疵。
前端vue实现国际化
学习记录
09-13 1257
前端vue国际化
v-google-translate:谷歌翻译 Vue@2.x
07-24
这个包可以通过使用谷歌翻译来本地化使用 vue 制作的网络应用程序。 随着您的网站和应用程序的发展，您可能会发现需要扩展到您所在国家/地区以外的其他市场。 如果您的目标市场隔海相望并使用不同的语言，您可能别...
vue-google-translate:Google翻译API的vue.js包装器。 该软件包简化了vue Web应用程序的本地化
05-12
该软件包可通过使用Google翻译对vue制作的Web应用程序进行本地化。 随着网站和应用程序的发展，您可能需要扩展到母国以外的其他市场。 如果您的目标市场隔海相望，并且会说不同的语言，那么您可能别无选择，只能...
Google翻译工具：快速实现网站多语言
09-22
谷歌中国发布了一款翻译小工具，可以快速而简单的实现一个网站或博客的多语言。所有的工作只需要在网站上增加一行JavaScript代码，就可以立刻实现网站翻译为世界各种语言。翻译的实现是直接调用Google的翻译网址。 　　<script src="http://www.gmodules.com/ig
google翻译接口（js的api实现与C＃两个版本）
02-08
google翻译接口（js的api实现与C＃两个版本）
VUE实现在线翻译11111
08-03
用VUE-cli 2.0实现简单的在线翻译 主要就是熟悉VUE框架的使用
谷歌浏览器-vue插件-5.3.4-0.zip
02-23
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面，尤其在单页应用程序（SPA）开发中广泛应用。谷歌浏览器（Google Chrome）则是全球最广泛使用的网络浏览器，它支持丰富的扩展程序来增强用户体验和...
Vue2.x谷歌翻译插件：本地化网络应用的利器
资源摘要信息:"v-google-translate: 谷歌翻译 Vue@2.x" 知识点: 1. **技术栈**: 本项目基于Vue.js框架，版本为2.x系列。Vue.js是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序。它以其易用性和...
谷歌翻译影响vue_给自己的网站接入谷歌翻译，以及修复了一个谷歌翻译的一个bug...
weixin_36130575的博客
01-17 1165
给网站加谷歌翻译，搜索引擎一搜一大堆，这里不再赘述。只贴一个申请谷歌翻译的一个地址：https://translate.google.com/...和一段代码：下面是官方给出的代码：function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: goo...
Google翻译 - 让你的网站国际化
weixin_30621919的博客
10-21 259
站长从Google黑板报得到的消息：Google翻译推出了一个小工具，能使使用二十三种语言的外国网友用他们的母语了解用户的中文网页。获取Google翻译工具的方法是将下面一段代码插入到你网站的合适位置，该工具的语言列表中就会显示二十三种语言的名称，当有网友来访时，显示菜单会提示使用者“选择语言”。例如：使用者用英文浏览器，那提示文字就是“Select Language”；...
JS/JQ/VUE调用谷歌翻译API
qq_44866810的博客
02-01 725
谷歌Cloud Translation API要求API密钥必须以特定方式添加到HTTP请求头或查询参数中
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>