vue-----vue-18n多语言处理，实现国际化

需求：后台管理系统中要求页面国际化，页面语言能够进行切换，满足不同地区用户需求。

可以借助vue-i18n插件来实现这个需求

vue-i18n国际化插件：实现语言切换

使用：

一、安装依赖

npm install vue-i18n

二、main.js文件中导入、配置（配置也可写在一个单独的i18n.js文件中）

import Vue from "vue";
import App from "./App";
import router from "./router";
import VueI18n from "vue-i18n";
Vue.config.productionTip = false;


Vue.prototype.$echarts = echarts;
Vue.use(VueI18n); // 通过插件的形式挂载
/* eslint-disable no-new */
//实例化vue-i18n
const i18n = new VueI18n({
  // 从本地存储中取，如果没有默认为中文，
  // 这样可以解决切换语言后，没记住选择的语言，刷新页面后还是默认的语言
  // 设置默认语言
  locale: localStorage.getItem("locale") || "zh-CN", // 语言标识
  messages: {
    "zh-CN": require("./locales/zh.json"), // 中文语言包
    "en-US": require("./locales/en.json"), // 英文语言包
    Korean: require("./locales/Korean.json") // 韩语语言包
  },
  // 去除警告
  silentTranslationWarn: true
});

new Vue({
  el: "#app",
  router,
  i18n, // 不要忘记
  render: h => h(App)
});

三、创建语言文件(src>locale>相应的语言包.json)

实列：

四、页面上使用

（1）插值表达式中：

 
{{ $t("test.a1") }}

（2）v-bind属性绑定中：

（3）data、methods中： 

 五、全局切换语言（通过this.$i18n.locale的值来切换，插件自带的）

示例：