Vue项目i18n国际化语言切换

npm install vue-i18n

const cn = {
  header: {
    logo: "标志",
    router: {
      index: "首页",
      about: "关于"
    }
  },
  user: {
    login: "登录",
    register: "注册",
    hasCount: "已有账号?",
    noCount: "没有账号?",
    logOut: "退出登录",
    logSucc: "登录成功",
    place: {
      userName: "请输入用户名",
      passWord: "请输入密码",
      passWordAgain: "请再次输入密码",
      passNotMatch: "两次输入密码不一致"
    }
  },
  code: {
    error: "错误"
  }
};
export default cn;

const en = {
  header: {
    logo: "Logo",
    router: {
      index: "Index",
      about: "About"
    }
  },
  user: {
    login: "Sign in",
    register: "Sign up",
    hasCount: "Already have an account?",
    noCount: "New user?",
    logOut: "Sign out",
    logSucc: "Sign in Success",
    place: {
      userName: "Please enter a user name",
      passWord: "Please enter your password",
      passWordAgain: "Please enter your password again",
      passNotMatch: "The two passwords do not match"
    }
  },
  code: {
    error: "error"
  }
};
export default en;

// i18n/langs/index.js
import en from "./en";
import cn from "./cn";
export default {
  en: en,
  cn: cn
};

//引入vue
import Vue from "vue";
//引入i18n语言包
import VueI18n from "vue-i18n";
//引入定义好的中英文语言
import messages from "./langs";
//在vue中使用i18n
Vue.use(VueI18n);

//初始化设置默认语言
const i18n = new VueI18n({
  locale: "en",
  messages
});

export default i18n;

//main.js
import i18n from "./i18n/i18n";

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

import cnLocale from "element-ui/lib/locale/lang/zh-CN";
const cn = {
  //其他语言参数
  ...cnLocale
};

import enLocale from "element-ui/lib/locale/lang/en";
const en = {
  //其他语言参数
  ...enLocale
};

// src/i18n/i18n.js
import locale from "element-ui/lib/locale";

locale.i18n((key, value) => i18n.t(key, value));

//切换语言
methods: {
    switchLang() {
      this.$i18n.locale == "cn"
        ? (this.$i18n.locale = "en")
        : (this.$i18n.locale = "cn");
    }
}