elementui 增加多语言支持

添加多语言支持

• 在src目录下增加i18n文件夹

  
  i18n文件夹.png

其中 i18n.js内容如下:

import Cookies from 'js-cookie'

export default{
  current_locale : (function(){
    //优先从Cookie中获取语言信息
    let cookie_lang = Cookies.get("local_cookie_name");
    if((cookie_lang != null && typeof(cookie_lang) != "undefined" && cookie_lang != "")){
      return cookie_lang;
    }
    //获取浏览器默认语言
    let lang = navigator.language || navigator.userLanguage;
    if(lang == "zh-CN"){
      return "zh_CN";
    }else if(lang == "en-US"){
      return "en_US";
    }else if(lang == "zh_TW"){
      return "zh_TW";
    }
    return "zh_CN";
  })()
}

en-US.js内容如下:

module.exports = {
  lang : {
    template_manage:"Template Manage"
  }
}

zh-CN.js内容如下:

module.exports = {
  lang : {
    template_manage:"模板管理"
  }
}

在这里需要增加 js-cookie vue-i18n ，固安装之

cnpm install --save js-cookie vue-i18n

使用

1. 切换语言

this.$i18n.locale = "en_US";

2. 代码中获取国际化词条

this.$t('lang.template_manage')

3. 页面中使用

{{$t('lang.template_manage')}}
<el-form-item :label="$t('lang.template_manage')">
</el-form-item>