我在哪里将谷歌翻译插件代码添加到我的 Vue 应用程序

【问题标题】：Where do i add Google translate plugin code to my Vue App我在哪里将谷歌翻译插件代码添加到我的 Vue 应用程序
【发布时间】：2019-05-02 21:54:15
【问题描述】：

我在哪里添加谷歌翻译插件我的 Vue 应用程序具有以下类型的代码

 <div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

将其添加到模板会导致错误，因为不允许使用会导致副作用的代码或标签。

我可以在一个通用组件中添加另一个脚本标签吗？

【问题讨论】：

标签： vue.js vue-component google-translate

【解决方案1】：

至少有两种方式：

快捷方式：全部放入public/index.html。
漫长的路：

将除googleTranslateElementInit()函数外的脚本放入public/index.html：

  <div id="google_translate_element"></div>    
     
  <script     
    type="text/javascript"     
    src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"    
  >    
  </script>

然后在src/App.vue 或src/main.js methods 部分定义googleTranslateElementInit() 函数：

    googleTranslateElementInit() {
      window.google.translate.TranslateElement(
        { pageLanguage: "en" },
        "google_translate_element"
      );
    },

注意需要额外的window 对象。

然后在你准备好时调用它：

this.googleTranslateElementInit();

这种长方法更灵活，因为您可以控制何时加载 Google 插件，因此可以预先运行任何其他需要的早期代码。

如果全部放在 index.html 中，这将是困难的。

【讨论】：