純前端如何實現多語言切換

　　VUE實現項目多語言，有個比較不錯的國際化插件：vue-i18n，需要用的時候具體可以自己查語法

　　組件git地址：vue-i18n的github
　　組件文檔地址：vue-i18n的文檔

　　vue項目的多語言/國際化插件vue-i18n詳解，可以看這篇博客，還比較全：https://blog.csdn.net/qq_25324335/article/details/80767749?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

　　想實現的效果：需要在web中實現多語言的切換，當用戶語言切換完成后下次重新打開網頁，也是上次設置的語言進行顯示。

　　實現步驟：

1、在用戶點擊切換語言后，把選擇的語言版本保存在cookie或storage中

//寫入cookie函數
function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } //獲取cookie
function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else
    return null; } //setCookie('lan','hk'); 繁體中文 //setCookie('lan','cn'); 簡體中文 //setCookie('lan','en'); 英文

2、在包含靜態文本的標簽中，添加一個屬性：set-lan=”html:name” ，屬性值中的 html 代表內容的位置，name 代表要替換的文字的標識 。例如：

<span set-lan="html:name">名字</span>
<input type="text" value="名字" set-lan="val:name" />

 // 這些需要在開發過程中添加進去，並且，要切換語言文字的外面都必須要有一個標簽包裹，否則無法進行切換；如：
<span set-lan="html:name"><i class="icon"></i>名字</span>
// 這樣的代碼，是無法把“名字”替換成“Name”的，會把“名字”前面的i標簽也一起替換掉，如果不想把i標簽也替換掉，就要在“名字”外面添加一個標簽，改成：
<span><i class="icon"></i><lan set-lan="html:name">名字</lan></span>

3、定義3個語言的標識+內容的json字符串。比如

var cn = { "name" : "姓名", "tel" : "電話", "email" : "郵箱", }; var hk = { "name" : "姓名", "tel" : "電話", "email" : "郵箱", }; var en = { "name" : "Name", "tel" : "Tel", "email" : "Email", };

4、遍歷帶set-lan屬性的標簽，進行文本替換

$('[set-lan]').each(function(){ var me = $(this); var a = me.attr('set-lan').split(':'); var p = a[0];   //文字放置位置
    var m = a[1];   //文字的標識 //用戶選擇語言后保存在cookie中，這里讀取cookie中的語言版本
    var lan = getCookie('lan'); //選取語言文字
    switch(lan){ case 'cn': var t = cn[m];  //這里cn[m]中的cn是上面定義的json字符串的變量名，m是json中的鍵，用此方式讀取到json中的值
            break; case 'en': var t = en[m]; break; default: var t = hk[m]; } //如果所選語言的json中沒有此內容就選取其他語言顯示
    if(t==undefined) t = cn[m]; if(t==undefined) t = en[m]; if(t==undefined) t = hk[m]; if(t==undefined) return true;//文字放置位置有（html,val等，可以自己添加）
    switch(p){ case 'html': me.html(t); break; case 'val': case 'value': me.val(t); break; default: me.html(t); } });

5、以上是html中的文字替換，但是寫在js中的文字怎么辦？ 可以定義一個函數，來讀取

function getLan(m) { //獲取文字
    var lan = getCookie('lan');     //語言版本 //選取語言文字
    switch(lan){ case 'cn': var t = cn[m]; break; case 'hk': var t = hk[m]; break; default: var t = en[m]; } //如果所選語言的json中沒有此內容就選取其他語言顯示
    if(t==undefined) t = cn[m]; if(t==undefined) t = en[m]; if(t==undefined) t = hk[m]; if(t==undefined) t = m; //如果還是沒有就返回他的標識

    return t; }

　　那么在js中使用的文字就只要用此函數來讀取就可以了，如：'姓名' 就改成 getLan('name')

　　當然還有很多種其他方式，上述這種涉及到遍歷dom和修改文字，感覺並不是太好，也可以請求后台返回不同語言的文字。源網站搜索大全http