Vue（三十三）國際化解決方案
阿新 • • 發佈：2019-02-20
ans writing The 段落 我沒 tail 難點 -c asc
摘自：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
（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
Vue（三十三）國際化解決方案