vue2+elemnet 国际化

安装国际化组件 vue-i18n

npm i  vue-i18n  或者 yarn install  vue-i18n

 在src 目录下创建lang 文件夹 里面有en.js、zh.js、index.js

en.js

export defuat {
    翻译: translate
}

zh.js

export default { 
    翻译: 翻译
}

index.js

import Vue from "vue";
import VueI18n from "vue-i18n";
/* 引入语言 */
import en from "element-ui/lib/locale/lang/en";
import zh from "element-ui/lib/locale/lang/zh-CN";
import localZh from "@/lang/zh";
import localEn from "@/lang/en";
let lang = navigator.language || navigator.userLanguage;
if (localStorage.getItem("lang")) {
  lang = localStorage.getItem("lang");
}
let locale = zh;
if (lang === "zh-CN") {
  locale = zh;
} else if (lang === "en-US") {
  locale = en;
}
Vue.use(VueI18n);
// set ElementUI lang
// Vue.use(ElementUI, { locale });
localStorage.setItem("lang", lang);
const i18n = new VueI18n({
  locale: lang,
  messages: {
    "zh-CN": localZh,
    "en-US": localEn,
  },
});
export { i18n, locale, lang };


export default new Vue({
  i18n,
});// 为了方便在js 页面使用 ，在js引用import i18n form "@/lang" 使用 i18n.$t("翻译")

 页面语言切换

 main.js 需要引入的方法

import { i18n, locale } from "@/lang/index";
Vue.use(ElementUI, { locale });
new Vue({
  el: "#app",
  router,
  i18n,
  store,
  render: (h) => h(App),
});