Vue项目中动态切换中英文语言(实现无需页面reload)

Vue项目中动态切换中英文语言(实现无需页面reload)

如题，在项目工作中总会有切换语言的需求，我们脑中很快就能浮现出

Vue.i18n.locale = 'zh';  //或者
Vue.i18n.locale = 'en';

而因为中英文字在同一种字体下可能会导致页面布局，效果等的不同，因此实际上在不想页面reload的前提下，我们需要实现动态加载不同css文件。

动态加载不同css文件

• 因为预加载的原因，通过判断使用import(url)这种方式在项目发布后会直接将import里面的样式表加载，达不到动态的效果，所以这种方法不行。
• 在 中加入 (如下), 注意href 是static下的（请按照项目框架的相关路径设置）

<link rel="stylesheet" type="text/css" href="static/css/chinese.css">

接下来创建引入css文件的 Javascript:

//引入css文件
function addCss(url){
    var cssFile=document.createElement("link");
    cssFile.setAttribute("rel", "stylesheet");
    cssFile.setAttribute("type", "text/css");
    cssFile.setAttribute("href", url);

    if (typeof cssFile!="undefined"){
        document.getElementsByTagName("head")[0].appendChild(cssFile);    
    }
}

//移除css文件
function deleteCss(url){
    var targetElement= "link";
    var targetAttr= "href";
    var allSuspects=document.getElementsByTagName(targetElement);

    for (var i=allSuspects.length; i>=0; i--){
        if (allSuspects[i] && allSuspects[i].getAttribute(targetAttr)!=null && allSuspects[i].getAttribute(targetAttr).indexOf(url)!=-1){
            allSuspects[i].parentNode.removeChild(allSuspects[i]);
        }
    }
}

export default {addCss,deleteCss};

selectLanguage(lang){
  this.langValue=lang;
  localStorage.setItem('language',lang);
  this.$i18n.locale=lang;
  if(lang=='zh'){
    operateCss.addCss('static/css/chinese.css');
  }else{
    operateCss.deleteCss('static/css/chinese.css');
  }
},

• 另一种其实跟上面的差不多，在中引入