需求：后台管理系统中要求页面国际化，页面语言能够进行切换，满足不同地区用户需求。
可以借助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>?