国际化的vue-i18n

时间  2019-11-17
标签 国际化 vue i18n 繁體版
原文   原文链接

前言

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

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

安装

npm 安装npm

npm install vue-i18n --save

复制代码

yarn 安装element-ui

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,这个基本操做就不说什么喽...bash

可是要注意的是：在vue中注册i18n以后，咱们即可以在组件中经过this.$i18n获取到咱们配置好的这个i18n对象cookie

咱们能够看的出来，将导入的VueI18n实例化，在new VueI18n()中传入配置信息：app

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

locale

主要是用来设置语种包，好比咱们规定"en"表明英文语言包，那么在new VueI18n()中传入配置信息时，能够这样:ide

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

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

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

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

项目中确定会须要改变语种(这不废话么，不然干吗使用它...),接下来咱们就看看经常使用的改变语种的方法；

改变locale(语种)

一、经过实例化以后改变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个时，索引从1开始，最大索引为2；当管道符大于1个时，索引从0开始(相似数组),最大索引为管道符的个数

三、经过使用$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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程