摘自：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> 切换语言： <!--{cn}切换语言：--> <!--{en}switch the language：--> </span> <a href="javascript:tran.setLang(‘en‘);">English</a> <a href="javascript:tran.setLang(‘cn‘);">中文</a> <select name="language" id="languager"> <option value="chinese"> 中文 <!--{cn}中文--> <!--{en}Chinese--> </option> <option value="english"> 英文 <!--{cn}英文--> <!--{en}English--> </option> </select><br /> <span> 按钮： <!--{cn}按钮：--> <!--{en}button：--> </span> <button id=‘btn-addAlarmToEvent‘ type="button" class="btn btn-success">删除 <!--{cn}删除--> <!--{en}delete--> </button><br /><br /> <span> 段落： <!--{cn}段落：--> <!--{en}paragraph：--> </span> <p>这是一段话 <!--{cn}这是一段话--> <!--{en}This is a word--> </p><br /> <div id="test"> <span> 层级： <!--{cn}层级：--> <!--{en}tier：--> </span> 这是一个层级 </div><br /> <span> 另一个层级： <!--{cn}另一个层级：--> <!--{en}other tier：--> </span> <div id="test1"> </div><br /> <span> 超链接： <!--{cn}超链接：--> <!--{en}href：--> </span> <a href=""> 点击测试 <!--{cn}点击测试--> <!--{en}click Test--> </a><br /> <span> 超链接： <!--{cn}超链接：--> <!--{en}href：--> </span> <!--第三种写法的，将语种作为参数传递--> <a href="test.html?lang=jp"> 点击进日语 <!--{cn}点击进入日语--> <!--{en}click into jp--> </a> <span> 输入框： <!--{cn}输入框：--> <!--{en}input：--> </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("<!--{cn}这是一个测试--><!--{en}This is a test-->"); $(‘#test1‘).text("这是层级的另一种写法").append("<!--{cn}这是层级的另一种写法--><!--{en}This is another way of writing the tier-->") $("#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
原文：https://www.cnblogs.com/yulingjia/p/10406191.html