纯前端如何实现多语言切换

　　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