0、安裝
版本安裝5.0.3，否則出現(xiàn)Vue.locale不存在的錯(cuò)誤

npm install vue-i18n@5.0.3

1、引入

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

2、語言資源包

// locale/languages/zh-CN.js 自定義的語言包
module.exports = {
  customName: {
    inbox: '收件箱',
    sentMail: '已發(fā)送郵件',
    mailBox: '郵箱',
    ...
  }
}

// locale/index.js
//按項(xiàng)目自己定義的語言包
//寫法一：
import en from './languages/en-US'
import zh from './languages/zh-CN'
const messages = {
  "zh-CN": zh,
  "en-US": en
}

//寫法二：
const messages = {
    'zh': require('./languages/zh-CN'),
    'en': require('./languages/en-US')
}

3、VueI18n實(shí)例

 //初始化插件變量
const i18n = new VueI18n({
    locale: 'zh-CN', //當(dāng)前語言環(huán)境
    messages  //語言環(huán)境對(duì)應(yīng)語言文件的map集合
})
// 如果本地做了語言包緩存
const i18n = new VueI18n({
    locale: (function(){
        if(localStorage.getItem('lang)) {
            return localStorage.getItem('lang)
        }
        return 'zh'
    }())
})

4、掛載

    new Vue({
        el： ’#app',
        i18n,
        router,
        components: {App},
        template: '<App/>'
        .....
    })

5、使用

// 標(biāo)簽中使用
<div>{{$t('customName.email')}}</div>
// 屬性使用
<input :placeholder="$t('customName.email')">
// js使用
this.$t('customName.email')
//可以把i18n實(shí)例賦給window
window.i18n = i18n
this.$i18n .t('customName.email')
i18n.t('customName.email')

6、語言切換
vue-i18n提供了一個(gè)全局配置參數(shù)叫l(wèi)ocale,用于實(shí)現(xiàn)不同語言的切換

    //值可能為zh | zh-CN 
    if( this.$i18n.locale === 'zh') {
        this.$i18n.locale = 'en'
        //若有緩存
        localStorage.setItem('lang', 'en')
    }else{
        this.$i18n.locale = 'zh'
        //若有緩存
        localStorage.setItem('lang', 'zh')
    }

ps:

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
//可以導(dǎo)入iview自帶的語言包 [可選]
import iview_zh from 'iview/dist/locale/zh-CN';
import iview_en from 'iview/dist/locale/en-US';
//項(xiàng)目自定義語言包
import zh from '@assets/lang/zh-CN'
import en from '@assets/lang/en-US'
Vue.locale('zh-cn', zh)
Vue.locale('en', en)
//如果合并
Vue.locale('zh-cn', Object.assign(zh,iview_zh ))
//如果使用了lodash
Vue.locale('en', _.merge(en,iview_en ))

//獲取當(dāng)前語言
const DEFAULT_LANG =  'zh-CN'
const LOCALE_KEY = 'localLang'
const navLang = navigator.language;
const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false;
const lang = window.localStorage.getItem(LOCALE_KEY) || localLang || DEFAULT_LANG

 //設(shè)置默認(rèn)中文
Vue.config.lang =lang

贊贊哇.png