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

问题

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

效果

hhh-google-translate v-google-translate

注意

由于这种方法是需要下载谷歌的js文件及请求谷歌翻译api的，所以需要科学上网才行。 而且选择语言时，切换语言最好先切换为源语言，再切换翻译语言，不然谷歌翻译会翻译错乱。

代码

hhh-google-translate 组件

这是我参考 写的。 以后可能放置到npm上 这样比较方便

使用

// 如果想全局先引入 谷歌的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下载源码 具体参考

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

<a :href="href" class="navbar-brand  notranslate">不翻译的字</a>