国际化的vue-i18n

前言

---

在我们开发项目，尤其是涉及到国际化项目时，常常会提取出项目中使用的静态文本，使用语言包进行管理， 当切换语言设置的时候，整个项目的文字可以响应式的切换语种。

今天主要介绍的是当我们在使用vue.js(2.x)搭配Element-ui开发项目时常用的国际化语言包处理插件——vue-i18n

安装

---

npm 安装

npm install vue-i18n --save

复制代码

yarn 安装

yarn add vue-i18n --save

复制代码

配置及使用

---

项目中vue-i18n的配置

常常一个项目中，我会以下列的结构来配置语言包:

主要看一下 lang/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang导入Element的语言包 英文
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang g导入Element的语言包 中文
import enLocale from './en' //导入该项目中用到的英文语言包
import zhLocale from './zh'//导入该项目中用到的中文语言包
Vue.use(VueI18n)
const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale,
    lk:"asdasd {msg}"//测试
  },

}

const i18n = new VueI18n({
  locale: Cookies.get('language') || 'en', // 设置语种
  messages, // 设置全局当地语言包,
  fallbackLocale: 'en',
  numberFormats:{ //设置 数字本地化
    'en': {
      currency: { //添加 $
        style: 'currency', currency: 'USD'
      }
    },
    'zh': {
      currency: { //添加 ￥
        style: 'currency', currency: 'JPY', currencyDisplay: 'symbol'
      }
    }
  },
    dateTimeFormats:{//设置 日期时间本地化
    'en': {
      short: { 
        year: 'numeric', month: 'short', day: 'numeric'
      },
      long: {
        year: 'numeric', month: 'short', day: 'numeric',
        weekday: 'short', hour: 'numeric', minute: 'numeric'
      }
    },
    'zh': {
      short: {
        year: 'numeric', month: 'short', day: 'numeric'
      },
      long: {
            year: 'numeric', month: 'short', day: 'numeric',
            weekday: 'short', hour: 'numeric', minute: 'numeric'  
      }
    }
  }
})

export default i18n

复制代码

在主入口文件main.js中，也需要配置

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//导入配置好的国际化语言包
import i18n from './lang' // Internationalization
Vue.use(Element, {
  size: 'medium', // set element-ui default size设置元素默认大小
  i18n: (key, value) => i18n.t(key, value)//在注册Element时设置i18n的处理方法
})
Vue.config.productionTip = false// 生产提示
new Vue({
  el: '#app',
  i18n, // 注入 配置好的国际化语言配置
})


复制代码

对于引入VUE,使用vue.use,这个基本操作就不说什么喽...

但是要注意的是：在vue中注册i18n之后，我们便可以在组件中通过this.$i18n获取到我们配置好的这个i18n对象

我们可以看的出来，将导入的VueI18n实例化，在new VueI18n()中传入配置信息：

• locale 当前语种
• fallbackLocale 如果当前语种不存在时，默认设置当前语种
• messages 本地语言包（'en','zh'...）
• numberFormats 设置 数字格式化
• dateTimeFormats 设置 时间日期格式化 接下来一一介绍：

locale

主要是用来设置语种包，比如我们规定"en"代表英文语言包，那么在new VueI18n()中传入配置信息时，可以这样:

new VueI18n({
    locale:'en'
})
复制代码

这里有一个细节点，案例中，我是这样配置的:

new VueI18n({
    locale: Cookies.get('language') || 'en',
})
复制代码

原因:先在cookie中获取有没有之前设置的语种，如果设置过拿到设置的语种，如果还未设置，默认调用英文语言包.在整个项目中也是按照在用户设置语种后，将设置后的方案放到cookie中，以便下次用户使用时，自动获取上一次设置的语种。

项目中肯定会需要改变语种(这不废话么，否则干嘛使用它...),接下来我们就看看常用的改变语种的方法；

改变locale(语种)

1、通过实例化之后改变locale属性值

//lang.js
const i18n new VueI18n({
    locale: Cookies.get('language') || 'en',
})
export defult i18n

//在组件中
import i18n from "@/lang" //根据项目对应真实路径
i18n.locale="zh" 改变为中文
Cookies.set('language',"zh")//在cookie中存入设置
复制代码

---

messages

接下来说一说最关键的一项，语言包.

我们一般会将项目中的静态语言分成产品所需要的各个语种,包括中文，英文，法文等...比如:

message:{
  zh: {
    i18nView: {
      title: '切换语言',
      note: '目前只翻译了当前页面和侧边栏和导航，未完待续，敬请期待...',
      datePlaceholder: '请选择日期',
      tableDate: '日期',
      tableName: '姓名',
      tableAddress: '地址',
      default: '默认按钮',
      primary: '主要按钮',
      success: '成功按钮',
      info: '信息按钮',
      warning: '警告按钮',
      danger: '危险按钮'
    }

  },
  en: {
    i18nView: {
      title: 'Switch Language',
      note: 'Currently only translated the i18n page and the sidebar and levelbar, please look forword to...',
      datePlaceholder: 'Pick a day',
      tableDate: 'tableDate',
      tableName: 'tableName',
      tableAddress: 'tableAddress',
      default: 'default:',
      primary: 'primary',
      success: 'success',
      info: 'info',
      warning: 'warning',
      danger: 'danger'
    }
  }
}
复制代码

其中 zh就代表静态语言中文版，en代表静态语言英文版.当然，如果项目很大的话，我们一般就将en,zh单独分成两个模块——en.js,zh.js.这样项目不仅结构变得更简洁明了，在维护开发阶段也节省很多时间.

说了这么多（废话好多...）,现在终于该说一说组件中怎么调用配置好的语言包了!! 我们先看一个例子

// main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const messages = {
  en: {
    message: {
      hello: 'How old are you?'
    }
  },
  zh: {
    message: {
      hello: '怎么老是你?'
    }
  }
}
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})
new Vue({ i18n }).$mount('#app')
//组件中
<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>
//输出
<div id="#app">
  <p>How old are you?</p>
</div>
复制代码

上面例子中，在配置i18n中"en"代表了英文语种,在组件中通过this.$t这个方法来获取到我们配置好的语言包中的对应数据。

$t 的使用

简单来说就是拿到messages中的某个数据，参数是字符串，代表着所要获取的某一条数据

很多时候，我们需要的不是静态文本，往往需要的是一些可以动态添加的

[命名格式化]

const messages = {
  en: {
    message: {
      GG: '对{msg}不起'
    }
  }
}
//组件中使用
<p>{{ $t('message.GG', { msg: '三要' }) }}</p>
//输出
<p>对三要不起</p>
复制代码

这种叫做命名格式化，可以区域格式化信息。 这种情况下$t的第二参数是一个对象，就代表了所有需要动态添加的内容,注意是所有在message中所需要动态添加的变量都在第二个参数中。

我们来下下面几种情况

1.未传第二个参数

const messages = {
  en: {
    message: {
      GG: '{a}{b}哈哈'
    }
  }
}
//组件中使用1
<p>{{ $t('message.GG') }}</p>
//输出
<p>{a}{b}哈哈</p>

//组件中使用2
<p>{{ $t('message.GG',{a:1,b:2) }}</p>
//输出
<p>12哈哈</p>
复制代码

如上述例子中显示，如果未传第二个参数，那么将会都以按照字符串的形式展示.

---

2.不同的命名类型

const messages = {
  en: {
    message: {
      GG: '{a}{b}哈哈'
    }
  }
}
//组件中使用  数值型与字符串类型 1
<p>{{ $t('message.GG',{a:1,b:"2") }}</p>
//输出
<p>12哈哈</p>

//组件中使用2 对象类型
<p>{{ $t('message.GG',{a:{},b:"2") }}</p>
//输出
<p>[object Object]2哈哈</p>

//组件中使用3 数组类型（内含布尔，对象类型）
<p>{{ $t('message.GG',{a:[1,2,3,true,{}],b:"2") }}</p>
//输出
<p>123true[object Object]2哈哈</p>
复制代码

总结一下下：

在组件中动态添加所需要的文本时:

• OBJECT对象类型会直接输出 [object Object]
• BOOlEAN布尔类型会按照字符串输出true-->"true"/false-->"false"
• ARRAY数组类型中，如果每一项都是数值或者字符串那么直接输出,否则按上述情况显示

好了现在我要说的是，上面总结的几条规则，都是大废话，请不要记

因为这就是处理国际化语言包的工具包，语义化的意思很明确了，主要处理项目中的静态文本，没有人会傻到使用number和string之外类型的数据.

---

废话扯远了，接下来咱们扯回来，看一看另一个格式化方式

[列出格式]

话不多说，直接看例子吧，相信各位大佬一看就会。。

const messages = {
  en: {
    message: {
      hello: '{0}{1}{2}{3}{4}游过一群鸭'
    }
  }
}
// 组建内使用 1 数组方式
<p>{{ $t('message.hello', ['门'，'前'，'大'，'桥'，'下']) }}</p>
//输出
<p>门前大桥下游过一群鸭</p>

// 组建内使用 2 类似命名格式的方式
<p>{{ $t('message.hello', {'0':"门",'1':'前','2':'大','3':'桥',4:'下 '}) }}</p>
//输出
<p>门前大桥下游过一群鸭</p>
复制代码

---

$tc 的使用

我们往往需要多元化的复数，比如一个记录文件上传的状态loadStatus,值可能为已上传和未上传.如同下面例子

const messages = {
  zh: {
    loadStatus: '已经上传 | 未上传',
    size:'S | M | X | XXL'
  }
}
复制代码

这里必须注意一点：必须定义具有管道 | 分隔符的区域设置，并在管道分隔符中定义复数

//在组件内使用
<p>{{$tc('loadStatus',1) }}</p>
<p>{{$tc('size',1) }}</p>
<p>{{$tc('size',2) }}</p>
//输出
已经上传
M
X
复制代码

总结:

1、在定义复数时，必要使用|管道符分隔。

2、当|管道符等于1个时，索引从1开始，最大索引为2；当管道符大于1个时，索引从0开始(类似数组),最大索引为管道符的个数

3、通过使用$tc(“复数”,index)获取对应语言文本

---

numberFormats

numberFormats是对象类型，是来设置数字格式化包括货币类型等.

numberFormats:{ 
    'en': {
  currency: { //添加 $
   style: 'currency', currency: 'USD'
  }
    },
    'zh': {
  currency: { //添加 ￥
    style: 'currency', currency: 'JPY', currencyDisplay: 'symbol'
  }
    }
  },

复制代码

$n

对于数字格式化在组件中如何使用，如同$t一样，也提供了对应的方法$n.

//组件中使用
  <p>{{ $n(100, 'currency') }}</p>
  <p>{{ $n(100, 'currency', 'zh') }}</p>
  //输出
    <p>$100.00</p>
  <p>￥100</p>
复制代码

$n（number,'path','locale'）方法，三个参数：

1.用户传入数字 必传
2.调用的格式化方案 必传
3.使用的语种，默认是当前this.$i18n.locale
复制代码

---

dateTimeFormats

除了对于数字有格式化方案，对于日期时间也是有格式化方案的

dateTimeFormats:{//设置 日期时间本地化
    'en': {
  short: { //显示英文 年月日
    year: 'numeric', month: 'short', day: 'numeric'
  },
  long: { //显示英文 年月日 星期 小时 分钟
    year: 'numeric', month: 'short', day: 'numeric',
    weekday: 'short', hour: 'numeric', minute: 'numeric'
 }
    },
    'zh': {
  short: {
    year: 'numeric', month: 'short', day: 'numeric'
  },
  long: {
    year: 'numeric', month: 'short', day: 'numeric',
    weekday: 'short', hour: 'numeric', minute: 'numeric'  
  }
    }
  }
复制代码

如果处理数字有$n方法，对于日期时间格式化也有对应的方法——$d

//在组件中使用
<div id="app">
  <p>{{ $d(new Date(), 'short') }}</p>
   <p>{{ $d(new Date(), 'long') }}</p>
    <p>{{ $d(new Date(), 'short','zh') }}</p>
  <p>{{ $d(new Date(), 'long', 'zh') }}</p>
</div>
//输出
Aug 31, 2018
Fri, Aug 31, 2018, 3:46 PM

2018年8月31日
2018年8月31日周五 下午3:46
复制代码

其实这个就和处理数字格式化大同小异了，记住就好。 项目用到的可能不多，我习惯用Moment.js来处理时间日期

截止到这，对于messages的基本使用都介绍的差不多了。

---

常用方法

包括获取某个模块的语言包；区域语言包合并到全局语言包；

getLocaleMessage

this.i18n.getLocaleMessage('key'),这个方法是用来获取全局语言包中某个语种的语言包,比如:

this.i18n.getLocaleMessage('en')//获取英文的语言包 返回的同样是一个对象
复制代码

mergeLocaleMessage

this.i18n.mergeLocaleMessage('key',localeData),这是方法是用来对于 'key'语种中添加本地语言包,往往在某个子组件中，我们会将某个区域语言包合并到全局对应语种的语言包

this.$i18n.mergeLocaleMessage('zh', local.zh)//向全局中文语言包中补充内容
复制代码

v-t

最后再说一下自定义指令v-t.它和$t作用一样，都是获取语言包中的某条数据，但也有很大的区别，稍后总结

v-t的使用

//locale='en'
const messages = {
  en: {
    message: {
      GG: hello'
    }
  },
  zh:{
   message: {
      GG: '哈哈{name}'
    }
  }
}
//组件中使用1 字符串用法
 <p v-t="'message.GG'"></p>
 //输出
 hello
 
 //组件中使用2 对象用法
<p v-t="{ path: 'message.GG', locale: 'zh', args: { name: 'lsq' } }"></p>
 //输出
 哈哈lsq
复制代码

总结:

字符串形式，只能简单的获取当前语种下的非动态文本数据 ，而对象用法支持设置语种，动态文本数据

v-t和$t的区别

$t 是扩展的Vue实例方法。它有以下优点和缺点:

[优点]

在模板中灵活使用小胡子语法(mustash)语法{{}}，也可以在Vue实例中灵活地使用计算道具和方法。

[缺点]

每次重新渲染时都会执行，因此它比较消耗性能。

v-t是一个自定义指令。它有以下优点和缺点：

[优点]

当翻译一次时，由于其使用自定义指令进行缓存，因此具有比$t方法更好的性能.

[缺点]

v-t不能灵活使用$t，因为它相当复杂。已翻译的内容v-t将插入到textContent元素中。

总结

此篇主要是简单讲了一些国际化vue-i18n的简单配置和使用方法，对于动态加载之类的官方文档也讲的很清楚了。好了就到这里了，希望大家多多评论，有错误的地方还请各位大佬嘴下留情。mua