vue i18n

1. npm 下载

npm install vue-i18n

2. 建language.js 文件

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import locale from 'element-ui/lib/locale' (locale 可能不行，直接引 import Element from "element-ui"）
import store from '../store/index.js';
import enEle from 'element-ui/lib/locale/lang/en' ; // element 英文
import zhEle from 'element-ui/lib/locale/lang/zh-CN'; // element 中文文
import zhLocale from './zh.js'; // 本地中文文件
import enLocale from './en.js'; // 本地英文文件

Vue.use(VueI18n)
// 合并文件
const locales = {
  zh: Object.assign(zhLocale, zhEle),
  en: Object.assign(enLocale, enEle),
}
const i18n = new VueI18n({
  locale: store.state.language, // store.state.language 缓存的中文or英文字段
  messages: locales
})

// 实现element插件的多语言切换
locale.i18n((key, value) => i18n.t(key, value)) 
// 如果locale失败用下面的Element
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

export default i18n

3. main.js 文件

import i18n from './language';

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

4. 中英文文件格式

// 中文
export default {
    message:{
       "姓名":"姓名"
    }
}
// 英文
export default {
    message:{
       "姓名":"name"
    }
}

5. 使用方法

<div>
    <h1>{{ $t("message.姓名") }}</h1>
  </div>

注：在中英文切换时，要给 i18n.locale 赋值,可以直接this.$i18n = language