vue項目國際化 vue-i18n 使用

目的

項目須要支持多語言，咱們須要提取出項目中使用的靜態文本，使用語言包進行管理， 當切換語言設置的時候，能夠自動切換整個項目的文字顯示。

發現Vue項目中有對應的組件vue-i18n，並且對項目的代碼修改不大，因而就使用了這個組件去修改項目中的代碼。

安裝

// script 引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>


// npm 安裝
npm install vue-i18n

// yarn 安裝
yarn add vue-i18n
複製代碼

通常一個項目中使用都是經過安裝包的方式去運行的，script引入的較少。

使用

項目中配置i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
    local: 'cn', // 設置語言 
    messages // 語言包
})

new Vue({
    el: '#app',
    ...
    i18n
})

// messages 大概的使用格式
{
    cn: {
        name: '名字'
    },
    us: {
        name： 'Name'
    }
}
複製代碼

使用i18n

簡單使用

// html 須要使用 {{}} 將 name包裝起來
{{$t('name')}}

// js
$t('name')
複製代碼

可傳入變量

// 命名傳入參數
// messages:
{
    cn: {
        name: '名字：{name}'
    },
    us: {
        name: 'Name: {name}'
    }
}

$t('name', {name: 'Jack'}) // Name：Jack


// 列表傳入參數
// messages: 
{
    cn: {
        name: '名字：{0}{1}'
    },
    us: {
        name: 'Name: {0}{1}'
    }
}

// array
$t('name', ['Jack', 'Job'])
// object
$t('name', {'0':'Jack', '1': 'Job'])
複製代碼

複數格式

使用分隔符 |

// messages: 
{
    us: {
        car: 'car | cars | {count} cars'
    }
}

$tc('car', x) // 選用不一樣的car類型

複製代碼

時間格式

const dateTimeFormats = {
  'us': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric'
    }
  },
  cn: {
      xxx
  }
}

// 須要放入配置項中
const i18n = new VueI18n({
    locale: '',
    messages,
    dateTimeFormats
})

// 使用
$d(new Date(), 'short')
$d(new Date(), 'long')
$d(new Date(), 'short', 'cn')
複製代碼

金額符號

const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency', currency: 'USD'
    }
  },
  'ja-JP': {
    currency: {
      style: 'currency', currency: 'JPY', currencyDisplay: 'symbol'
    }
  }
}

// 一樣也要加入配置項中
const i18n = new VueI18n({
  numberFormats
})

// 使用
$n(100, 'currency') // $100.00 
$n(100, 'currency', 'ja-JP') // ￥100

複製代碼

提供一個默認語言設置fallbackLocale

當某個語言不存在時，提供一個默認全的語言去處理

const messages = {
  cn: {
    name: 'Name:'
  }
  us: {
  }
}

// us 的語言包中不存在 name , 咱們默認cn，當us不存在時，使用cn的值
const i18n = new VueI18n({
  locale: 'us',
  fallbackLocale: 'cn',
  messages
})

複製代碼

v-t 能夠用於變量的引用，相似於$t

v-t 指令

// 官網的列子
new Vue({
  i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { hello: 'hi {name}!' },
      ja: { hello: 'こんにちは、{name}！' }
    }
  }),
  computed: {
    nickName () { return 'kazupon' }
  },
  data: { path: 'hello' }
}).$mount('#object-syntax')


<div id="object-syntax">
  <!-- literal -->
  <p v-t="{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }"></p>
  <!-- data biniding via data -->
  <p v-t="{ path: path, args: { name: nickName } }"></p>
</div>

<div id="object-syntax">
  <p>こんにちは、kazupon！</p>
  <p>hi kazupon!</p>
</div>
複製代碼

$t 與 v-t 對比

• $t 是方法調用，v-t 是一個指令
• v-t 性能比$t更好，有自定義指令的緩存
• $t 使用更靈活，使用方法更簡單

還有一些其餘的用法，具體的請參考官方文檔。。

切換語言的話，可使用內置變量：

// 經過設置 locale 來切換語言
this.$i18n.locale = cn | us
複製代碼

插入組件

若是遇到這樣的場景，如何去處理？

<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
複製代碼

個人第一反應是分紅兩個字段，a標籤不屬於翻譯的內容，只要寫成：

<p>{{ $t('xx1') }}<a href="/term">{{ $t('xx2') }}</a></p>
複製代碼

看了官網的介紹，說這種處理太笨拙了，能夠經過組件的方式去處理

// 這裏使用了i81n 組件
<i18n path="term" tag="label" for="tos">
    <a :href="url" target="_blank">{{ $t('tos') }}</a>
</i18n>

const messages = {
  en: {
    tos: 'Term of Service',
    term: 'I accept xxx {0}.'
  }
}

new Vue({
  el: '#app',
  i18n,
  data: {
    url: '/term'
  }
})
複製代碼

能夠看到，仍然使用了兩個變量存儲信息，可是經過tag來生產標籤，path來制定標籤的內容。

這種方式來講，使用起來較爲複雜，相比使用**兩個$t('')**的方式，對我來講可能暫時不須要，由於沒有看實際的實現方法，沒有對比過性能，沒法直接給出結論，後續深刻的話，還須要仔細對比。

更高級的用法，能夠控制html元素的插入位置，經過place來指定出如今html中的位置。

<i18n path="info" tag="p">
    <span place="limit">{{ changeLimit }}</span>
    <a place="action" :href="changeUrl">{{ $t('change') }}</a>
</i18n>

const messages = {
  en: {
    info: 'You can {action} until {limit} minutes from departure.',
    change: 'change your flight',
    refund: 'refund the ticket'
  }
}

const i18n = new VueI18n({
  locale: 'en',
  messages
})
new Vue({
  i18n,
  data: {
    changeUrl: '/change',
    refundUrl: '/refund',
    changeLimit: 15,
    refundLimit: 30
  }
}).$mount('#app')

// result
<p>
    You can <a href="/change">change your flight</a> until <span>15</span> minutes from departure.
</p>

複製代碼

保留了語句的一體性，可是若是只是針對名詞進行多語言的翻譯，不對語法進行要求的話，可能使用不到。

動態加載語言包

一次加載全部的語言包是沒有必要的，特別是語言包過的狀況下，以前我也提出了這個問題，發現官網上是給瞭解決方式的。

//i18n-setup.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from '@/lang' // 語言包的地址，隨項目自己設置修改
import axios from 'axios' // 根據項目中使用api請求模塊去設置，不必定是axios

Vue.use(VueI18n)

export const i18n = new VueI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en', // 默認語言設置，當其餘語言沒有的狀況下，使用en做爲默認語言
  messages // set locale messages
})

const loadedLanguages = ['en'] // our default language that is prelaoded 

function setI18nLanguage (lang) {
  i18n.locale = lang
  axios.defaults.headers.common['Accept-Language'] = lang // 設置請求頭部
  document.querySelector('html').setAttribute('lang', lang) // 根元素增長lang屬性
  return lang
}

export function loadLanguageAsync (lang) {
  if (i18n.locale !== lang) {
    if (!loadedLanguages.includes(lang)) {
      return import(/* webpackChunkName: "lang-[request]" */ `@/lang/${lang}`).then(msgs => {
        i18n.setLocaleMessage(lang, msgs.default)
        loadedLanguages.push(lang)
        return setI18nLanguage(lang)
      })
    } 
    return Promise.resolve(setI18nLanguage(lang))
  }
  return Promise.resolve(lang)
}


// 在vue-router的beforeEach的全局鉤子了處理
router.beforeEach((to, from, next) => {
  const lang = to.params.lang
  loadLanguageAsync(lang).then(() => next())
})
複製代碼

語言包的生成 & 替換項目中原有的靜態文本

這一步最關鍵，

• 抽離出全部出現的漢字
• 替換成$t('xxx'),$n,$d,v-t等，根據合適的狀況本身選擇
• 維護多個版本的語言文件

語言包這邊是這麼處理的，項目下新增一個目錄languages

--languages
    --lib
        -- cn.js // 中文語言包
        -- us.js // 英文語言包
        -- .. // 其餘語言，暫未實踐
    -- index.js // 導出語言包
複製代碼

cn.js

export default {
    common: {
        message: '消息'
    },
    xxx: {

    }
}
複製代碼

us.js

export default {
    common: {
        message: 'Messages'
    },
    xxx: {

    }
}
複製代碼

index.js

import cn from './lib/cn.js'

export default {
    cn,
    us
}
複製代碼

替換文本

<template>
    ...
    <div>{{$t('message')}}</div>
    ...
</template>

複製代碼

問題

• 不一樣的語言，格式不一樣，長度不一樣，可能須要調整項目的樣式，以保正常
• 對於一個已經在使用的項目，生成語言包這一步工做量大，浪費時間