国际化(i18n)

---

title: vue国际化
date: 2016-11-17

• 国际化

---

本文介绍vue国际化的思路与实现。

vue国际化

环境

Node6.9.1 + webpack1.13.2 +vue2.0 +vue-i18n4.7.1

思路

思路.png

实现

实现范围

1、 不支持图标、对齐方式的国际化；

2、 实现静态html文本、悬浮框提示信息、按钮文本、按钮提示、输入框placeholder的国际化

具体实现

1、 维护语言json文件zh_CN.json、en.json

en.json文件：

{  
    "tag1": "tag1",  
    "tag2": {  
       "tag2_tag1": "tag2.tag1"  
       "tag2_tag2": {  
            "tag2_tag2_tag1": "tag2.tag2.tag1"  
            ....  
       }  
     }  
} 

zh_CN.json文件：

{  
    "tag1": "标签1",  
    "tag2": {  
       "tag2_tag1": "标签2.标签1"  
       "tag2_tag2": {  
            "tag2_tag2_tag1": "标签2.标签2.标签1"  
            ....  
       }  
     }  
}  

支持多层嵌套

2、 在项目中引入vue-i18n

npm install vue-i18n

3、 全局注册vue-i18n

main.js

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

在Vue.use(VueI18n)后理想的位置加载语言文件（console warnings）

loadLanguages(Vue,['zh_CN','en'],lang)

function loadLanguages(Vue,languages,defaultLanguage){
  for (let i = 0; i < languages.length; i++) {
    Vue.locale(languages[i], function () {
      return fetch(`../static/language/${languages[i]}.json`, {
        method: 'get',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }
      }).then(function (res) {
        return res.json()
      }).then(function (json) {
        if (Object.keys(json).length === 0) {
          return Promise.reject(new Error('locale empty !!'))
        } else {
          return Promise.resolve(json)
        }
      }).catch(function (error) {
        return Promise.reject()
      })
    },function(){
      if(i === languages.length -1){
        Vue.config.lang = defaultLanguage
      }
    })
  }
}

动态加载语言文件，此处只是简单的示例，不包括错误处理等。动态加载语言包的方法，i18n的作者正在完善，待完善后，此方法将废弃。

4、 语言的动态切换

html


   {{item}}

4、 组件使用

4.1 静态html

// 静态html文本
{{ $t("tag1") }}
// 输入框placeholder

// 按钮文本
{{$t("button.addButton")}}
// 多层嵌套
{{ $t("tag2.tag2_tag2.tag2_tag2_tag1") }}

4.2 提示性的文字(message悬浮框)

通过
this.$t()
调用，动态获取提示信息

5、 配置信息、功能菜单国际化

配置信息、功能菜单在数据库中保存多语言版本，通过用户语言动态加载。不同版本的语言数据库单独部署。

6、 控件的国际化（暂不考虑）

控件的国际化指：通过语言切换不能完成国际化的控件，如控件使用习惯不一致，常见的为日期控件，不同的地区日历可能不一致

通过v-if判断语言然后选择需要显示的控件。

7、 图标、对齐方式的国际化（暂不考虑）

图标可通过数据库多语言配置实现国际化（图标样式从数据库读取），对齐方式通过样式实现国际化（如：beyond的RTL）