vue中使用avue、i18、elementUI国际化兼容问题

最新推荐文章于 2024-07-09 21:18:14 发布

文七爷

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量665

点赞数 1

分类专栏：开发语言文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_39171225/article/details/129364269

版权

开发语言专栏收录该内容

6 篇文章 0 订阅

订阅专栏

当我们同时使用vue-i18n和ElementUI和avue国际化会出现冲突，这里我们使用**…扩展运算符** 将国际化文件合并在一块即可解决冲突。

// 国际化
import Vue from 'vue';
import VueI18n from "vue-i18n";
// vue-i18n  多语言文件
import en from "@/lang/en.js";
import zh from "@/lang/zh.js";
// avue  多语言文件
import avueZhLocale from "@smallwei/avue/lib/locale/lang/zh";
import avueEnLocale from "@smallwei/avue/lib/locale/lang/en";
// element-ui  多语言文件
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: "en",
  messages: {
    en: {
      ...en,
      ...avueEnLocale,
      ...enLocale
    },
    zh: {
      ...zh,
      ...avueZhLocale,
      ...zhLocale
    },
  },
});

Vue.prototype._i18n = i18n;

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value),
  size: "small",
  menuType: "text",
});

Vue.use(AVUE, {
  locale: avueEnLocale,
  i18n: (key, value) => i18n.t(key, value),
  size: "small",
  menuType: "text",
});

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