Vue（三十三）国际化解决方案
摘自：https://blog.csdn.net/qq_41485414/article/details/81093999
（1）第一种方式：中英文两套页面
优点：技术含量最低
缺点：占内存，响应慢，麻烦
（2）第二种方式：谷歌插件
优点：简单快捷，利用谷歌翻译
缺点：翻译不完全准确，而且有谷歌的搜索栏，不是很好
实现方法：
<div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7">div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
//pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
},
'google_translate_element'
);
}
</script>
<script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>
（3）第三种方式：插件translate.js
优点：简单
缺点：不适合大型网站
实现方法：
https://wangchujiang.com/translater.js/
在页面上出现中文的地方写上中文和英文两种注释，然后通过切换来达到翻译页面的目的（Jquery）
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="js/translater.js" type="text/javascript" charset="utf-8">script>
head>
<style type="text/css">
button{margin-top: 1rem;}
span{margin-top: 1rem;color: crimson;}
div{margin-top: 1rem;}
a{margin-top: 1rem;}
input{margin-top: 1rem;}
style>
<body>
<span>
切换语言：
span>
<a href="javascript:tran.setLang('en');">Englisha>
<a href="javascript:tran.setLang('cn');">中文a>
<select name="language" id="languager">
<option value="chinese">
中文
option>
<option value="english">
英文
option>
select><br />
<span>
按钮：
span>
<button id='btn-addAlarmToEvent' type="button" class="btn btn-success">删除
button><br /><br />
<span>
段落：
span>
<p>这是一段话
p><br />
<div id="test">
<span>
层级：
span>
这是一个层级
div><br />
<span>
另一个层级：
span>
<div id="test1">
div><br />
<span>
超链接：
span>
<a href="">
点击测试
a><br />
<span>
超链接：
span>
<a href="test.html?lang=jp">
点击进日语
a>
<span>
输入框：
span>
<input type="submit" id="tj" name="" value="提交" />
<input type="button" name="an" id="" value="这是一个按钮" />
body>
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
/* 初始化翻译的js，第一种写法，用href链接切换语种 */
var tran = new Translater({
});
/* 第二种用法，其实都是一样，都是将默认的语种改为用户需要的语种 */
$('#test').append("");
$('#test1').text("这是层级的另一种写法").append("")
$("#languager").on("change", function(e){
var language=$(this).val();
if(language=="chinese"){
var tran;
tran = new Translater();
if (tran.getLang() === "default") tran.setLang('cn');
var tran = new Translater({
lang:"cn"
});
}else{
var tran;
tran = new Translater();
if (tran.getLang() === "default") tran.setLang('en');
var tran = new Translater({
lang:"en"
});
}
});
script>
html>
（4）第四种方式：i18N
优点：响应快，适合大中小型网站
缺点：麻烦，难点多
实现方法：vue可以使用elementui实现
http://element-cn.eleme.io/#/zh-CN/component/i18n