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' //设置英文
