记录vue+element实现国际化

在utils中定义i18n.js文件

import Vue from "vue"; // 引入Vue
import VueI18n from "vue-i18n"; // 引入i18n
// element组件
import en from "element-ui/lib/locale/lang/en";
import cn from "element-ui/lib/locale/lang/zh-CN";
import locale from "element-ui/lib/locale"; // 引入element 国际化配置
// 自定义
import LanguageData from "./../language/index";
Vue.use(VueI18n); // 混入Vue
// 创建实例并且挂在自定义语言包
const i18n = new VueI18n({
  locale: "CN", // 默认语言为中文
  messages: {
    CN: { ...LanguageData.CN, ...cn },
    EN: { ...LanguageData.EN, ...en },
  },
});
locale.i18n((key, value) => i18n.t(key, value)); // 把element 的语言包挂在到i18n中

export default i18n; // 导出实例

main.js中引入

// 国际化
import i18n from "@/utils/i18n";

自定义翻译

模板中使用