vue-i18n + Element-ui 国际化处理（TS）

Posted 2021-09-04 沿着路走到底

npm install vue-i18n

src下新建目录

zh-CN.ts

const zhLocale = require('element-ui/lib/locale/lang/zh-CN')

export default {
  common: {
    save: '保存'
  },
  systemParameter: {
    loading: '加载中...'
  },
  ...zhLocale.default
}

en-US.ts

const enLocale = require('element-ui/lib/locale/lang/en')

export default {
  common: {
    save: 'Save'
  },
  systemParameter: {
    loading: 'Loading...'
  },
  ...enLocale.default
}

index.ts

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import ElementLocale from 'element-ui/lib/locale'
import enUS from './en-US'
import zhCN from './zh-CN'

Vue.use(VueI18n)
// 注册i8n实例并引入语言文件
const i18n = new VueI18n({
  locale: 'en-US',
  messages: {
    'en-US': enUS,
    'zh-CN': zhCN
  }
})
ElementLocale.i18n((key: any, value: any) => i18n.t(key, value))
export const t = i18n.t
export default i18n // 将i18n暴露出去，在main.js中引入挂载

main.ts 里引入

import Vue from "vue";
import i18n from "@/i18n";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI, {
    size: "mini"
});


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

页面上使用

<div>
    {{ $t("systemParameter.loading") }}
</div>