[JavaScript知识库]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）插值表达式中：

 <div>{{ $t("test.a1") }}</div>

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

<el-input :placeholder="$t('test.a3')"></el-input>

（3）data、methods中：?

<script>
export default {
  data() {
    return {
      languageTitle: this.$t("test.a3"),
      language: "",
    };
  },
}
</script>

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

示例：

<template>
  <div class="box">
    <div>{{ $t("test.a1") }}</div>
    <div class="txt">{{ $t("test.a2") }}</div>
    <el-input :placeholder="$t('test.a3')"></el-input>
    <!-- 语言切换 -->
    <el-select v-model="language" @change="change(language)">
      <el-option label="中文" value="zh-CN"></el-option>
      <el-option label="英文" value="en-US"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      language: "",
      languageTitle: this.$t("test.a3"),
    };
  },
  methods: {
    // 切换语言 
    change(index) {
      console.log("index", index);
// 特别注意这里的值
      if (index == "zh-CN") {
        this.$i18n.locale = "zh-CN";
        console.log(this.$i18n.locale);
      } else {
        this.$i18n.locale = "en-US";
        console.log(this.$i18n.locale);
      }
    },
  },
};
</script>

<style>
</style>

?