i18n国际化

1. src 建立i18n文件夹 建立index.js + en.js + zh.js

/**
 * @description:  index.js
 * @use安装 {*}    yarn add vue-i18n
 * @use2配置 {*}   动态修改国际化this.$i18n.locale = "en"; localStorage.lang='en'; 
 * @use使用 {*}    页面使用 $t("user.username")
 */
import Vue from 'vue'
import VueI18n from 'vue-i18n'

import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'//引入element英文语言包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'//引入element中文语言包

import langZh from "./zh.js"//引入中文语言包
import langEN from "./en.js"//引入英文语言包

Vue.use(VueI18n)

let lang=localStorage.lang||'zh';
const i18n = new VueI18n({
    locale: lang,//默认为中文
    messages: {
        'zh': { ...langZh, ...zhLocale },
        'en': { ...langEN, ...enLocale }
    }
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
export default i18n

2. main.js

/* element */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//引入国际化语言包
import i18n from './i18n/index';
// import locale from 'element-ui/lib/locale/lang/en'
//使用i18n  不需要locale==>Vue.use(ElementUI, { locale })
Vue.use(ElementUI);

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')