我的前端页面国际化的三种尝试（谷歌搜索、translater.js、 jquery i18n）

我的页面国际化的三种尝试（谷歌搜索、translater.js、 jquery i18n）
本文为原创，转载请附加我的博客链接，谢谢。
我做的项目突然要做国际化，作为一个小白我做了很多尝试，并取得了一些结果。希望这篇博客能够帮到你。
一、第一种设想直接把谷歌翻译的插件引入页面，再使用jquery进行插件的语言切换，这个方案有几个问题：
1、 插件初始化就需要一些时间
2、 切换语言因为是在线翻译所以需要等一些时间、对于长句子的翻译很不准确，所以对于网站的开发，在线翻译是不可取的。

下面是我的尝试：
1）在需要翻译的页面的html开头里加

<meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c"></meta>

2）这是选择语言的下拉框，可以放在头部，根据网站内容看可以放到哪里都可以。可以自己修改样式，跟着浮动的话加样式。

<div id="google_translate_element"></div>

在页底加

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

3）js代码

<script type="text/javascript">
function googleTranslateElementInit() {
    
    
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

这样你的页面上就会有一个谷歌搜索的搜索栏。不是国际化的最佳选项。

二、第二种设想就是找到了一个插件translate.js.这是一个利用HTML注释的页面翻译解决方案。对于少量的静态页面，这种解决方案显得更简单。它没有依赖，压缩只有只有(~2kb).
我先说弊端吧。它的使用方法就是在页面上出现中文的地方写上中文和英文 两种注释，然后通过切换来达到翻译页面的目的。Jquery环境
1、 首先如果你的页面是少量的页面，这种方法完全没有问题。如果你的页面很多，需要写的注释就会有点多。
2、 后期再想扩展其他的语言也会有点困难。
3、 好的一点是，它使用起来非常简单。后期需要通过js变动的部分也可以通过往上拼注释的方式来完成。
下面来讲用法：
这个插件可以当做模块来安装：
打开项目所在的文件夹。右键git bash here
之后再命令行中输入

npm install translater.js

等待插件安装
安装好插件接下来的事情就变的很简单了。
1、 在页面上引入这个插件（具体路径取决于你放的目录）

<script type="text/javascript" src="/assets/scripts/plugins/translater.min.js"></script>

2、 在页面中的使用方法