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