vue国际化

1、安装vue-i18n：安装时注意匹配版本，不匹配会有警告信息，指定版本降级安装即可。

npm i vue-i18n -S

2、构建文件夹结构

config中为语言包配置：
1)zh-CN.js:

// element-ui中文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
export default {
    system:{
        title:'xxx'
    },
    xxx:{},
    ...elementZhLocale
}

2)en-US.js:

import elementEnLocale from 'element-ui/lib/locale/lang/en'
export default {
    system:{
        title:'xxx'
    },
    xxx:{},
    ...elementEnLocale
}

index.js:

import Vue from "vue"
import VueI18n from "vue-i18n"
import elementLocale from 'element-ui/lib/locale';  //elementUI的国际化
import Cookies from 'js-cookie'

Vue.use(VueI18n)//注入到所有的子组件

//require.context(path，deep，regExp)
//有3个方法 分别是keys() 

let langFileds =  require.context('./config', false, /\.js$/)

let regExp = /\.\/([^\.\/]+)\.([^\.]+)$/ //正则用于匹配 ./en.js中的'en'

// regExp.exec('./en.js')

let messages = {} //声明一个数据模型,对应i18n中的message属性

langFileds.keys().forEach(key => {
    let prop = regExp.exec(key)[1]  //正则匹配en|zh这样的值
    //messages[prop]相当于 messages['en'] = {table:{...}}
    messages[prop] = langFileds(key).default

})

let locale = Cookies.get('Admin-Lang') || "zh_CN" //从Cookies中获取lang

const i18n = new VueI18n({
    locale,//指定语言字段
    messages//定义语言字段
  })
  elementLocale.i18n((key, value) => i18n.t(key, value)) //elementui多语言切换
  export default i18n

4、配置main.js

import i18n from './i18n'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  //挂载
  i18n
})