vue專案國際化 vue-i18n 使用

_zysndy發表於2018-03-13
Vue

目的

專案需要支援多語言，我們需要提取出專案中使用的靜態文字，使用語言包進行管理， 當切換語言設定的時候，可以自動切換整個專案的文字顯示。

發現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>

複製程式碼

問題

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

相關文章