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

Question

我在哪里添加谷歌翻译插件它具有以下类型的代码到我的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>

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

我可以在公共组件中放置另一个脚本标记吗？

Answer 1

至少有两种方式：

1. 捷径：将其全部放在public/index.html中。

2. 长途：

将除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.jsmethods部分定义googleTranslateElementInit()函数：

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

请注意需要额外的window对象。

当你准备好的时候叫它：

this.googleTranslateElementInit();

这种长方法更灵活，因为你可以控制何时加载谷歌插件，从而提前运行任何其他需要的早期代码。

如果这一切都放在index.html中，这将是困难的。