國際化的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教程