如何在element-ui中使用国际化i18n

1.安装插件

npm install --save vue-i18n

2.在 src 文件夹下新增i18n文件夹，并且新增 i18n.ts 以及 zh.ts 以及 en.ts (本人使用的ts，如果你不使用请新建js文件)

文件目录如下

├── App.vue
├── src
│ └──i18n
│ ├── message.ts
│ └── index.ts
└── main.ts

3.在 index.js 中写入以下内容

import Vue from "vue";
import messages from "@/plugins/message";
// @ts-ignore
import VueI18n from 'vue-i18n'
// @ts-ignore
import ElementLocale from 'element-ui/lib/locale'


Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: 'en', // set locale
    messages, // set locale messages
});

ElementLocale.i18n((key:any, value:any) => i18n.t(key, value));

export default i18n;

4.在message.ts 中写入以下内容，设置语言，(后期增加文字请这边添加)

const en={
    message:{
        hello:'hello'
    }
}

const zh={
    message:{
        hello:'你好'
    }
}

export default {
    en,
    zh
}

5.在 main.ts 中写入以下内容

import i18n from "@/i18n";

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

6.基本配置已经完成，接下来说页面中的显示

  <div> {{$t('message.hello')}} </div>

7.切换语言

this.$i18n.locale = 'zh'    //设置中文

this.$i18n.locale = 'en'    //设置英文