多语言vue-i18n

0、安装
版本安装5.0.3，否则出现Vue.locale不存在的错误

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: '已发送邮件',
    mailBox: '邮箱',
    ...
  }
}

// locale/index.js
//按项目自己定义的语言包
//写法一：
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实例

 //初始化插件变量
const i18n = new VueI18n({
    locale: 'zh-CN', //当前语言环境
    messages  //语言环境对应语言文件的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、使用

// 标签中使用
<div>{{$t('customName.email')}}</div>
// 属性使用
<input :placeholder="$t('customName.email')">
// js使用
this.$t('customName.email')
//可以把i18n实例赋给window
window.i18n = i18n
this.$i18n .t('customName.email')
i18n.t('customName.email')

6、语言切换
vue-i18n提供了一个全局配置参数叫locale,用于实现不同语言的切换

    //值可能为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);
//可以导入iview自带的语言包 [可选]
import iview_zh from 'iview/dist/locale/zh-CN';
import iview_en from 'iview/dist/locale/en-US';
//项目自定义语言包
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 ))

//获取当前语言
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

 //设置默认中文
Vue.config.lang =lang

赞赞哇.png