Vue2.0+elementUI实现国际化

1、安装i18n

npm install vue-i18n --save
或
yarn add vue-i18n
如果用不了,那就指定版本
npm install vue-i18n@8.26.7 -S
或
yarn add vue-i18n@8.26.7 -S	

2、创建语言库

在src文件夹下新建lang文件夹，并创建zh.js,en.js,index.js等翻译语言的文件
(1)en.js

export default {
    
    
    home: {
    
    
        homepage: 'homepage'
    },
}

(2)zh.js

export default {
    
    
    home: {
    
    
        homepage: '首页',
       },
}

(3)index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from './en'
import zhLocale from './zh'
import locale from 'element-ui/lib/locale'
import Cookies from '@/utils/cookies'
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)
const messages = {
    
    
    en: {
    
    
        ...enLocale,
        ...elementEnLocale
    },
    zh: {
    
    
        ...zhLocale,
        ...elementZhLocale
    }
}
const i18n = new VueI18n({
    
    
    locale: Cookies.get('language') || 'zh',
    messages
})
locale.i18n((key, value) => i18n.t(key, value))
export default i18n

3、全局挂载

在main.js中引入

import Vue from 'vue'
import ElementUI from 'element-ui'
// 国际化
import i18n from './lang'
Vue.use(ElementUI, {
    
    
    i18n: (key, value) => i18n.t(key, value)
})
new Vue({
    
    
    el: '#app',
    i18n,
    render: h => h(App)
})

4、使用

（1）组件中使用

this.$t('home.homepage')

（2）js文件中使用

import i18n from '@/lang'
let upload = i18n.t('menu.uploadVideo')

（3）修改语言

 Cookies.set("language", 'zh');
 location.reload();