vue+ts 使用element国际化以及 i18n

src同级别新建lang文件夹 里面包含cn.ts,en.ts,index.ts
1:cn.ts

/* eslint-disable */
const zhLocale = require("element-ui/lib/locale/lang/zh-CN");
const cn = {
  time: '时间',
  ...zhLocale.default
};

export default cn;

2:en.ts

/* eslint-disable */
const enLocale = require("element-ui/lib/locale/lang/en");
const en = {
  time: 'time',
  ...enLocale.default
};

export default en;

3:index.ts

/* eslint-disable */
import Vue from 'vue'
import VueI18n from "vue-i18n";
import en from "./en";
import cn from "./cn";
Vue.use(VueI18n);
const messages = {
  en,
  cn
};
const i18n = new VueI18n({
    locale: 'cn',
    messages
})

export default i18n

4:在main.ts同级别新建一个main-config,ts

/* eslint-disable */
import Vue from "vue";
import i18n from "@/lang";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI, {
    size: "mini",
    i18n:(key:any, value:any) => i18n.t(key, value)
});

然后在main.ts里面引入

import Vue from "vue";
import i18n from "@/lang";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./main-config";
Vue.config.productionTip = false;
new Vue({
  i18n,
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

这样就可以实现国际化了 如果想使用自己定义的变量如time

  <div class="home">
    {{ $t("time") }}
  </div>