前言:国际化实例-页面中英文切换
两天前,老许给我布置了一个任务,就是让我研究element-ui国际化,说白了就是页面的中英文切换,我以为是个很简单的东西,就是点击一个按钮,然后切换语言就是了,他页面不是有自动翻译功能吗,等我开始看文档的时候,直接懵逼了,这是啥,为啥还得安装包,i18n他到底是个什么东西,于是我就开始试验,把element-ui里面的每一句代码都写在我的代码页中,根本完全实现不了,反正老许刚开始给我上课的时候就说了,别想,别看,去试,去写,写不出来就打印,这次的国际化,真的是一步一步试出来的,下面我就把整个过程写在文档里面,供后面使用的时候参考。
试错的过程太艰辛,我下载了无数个包,又卸载了无数个包,写了无数行代码,创建了十几个文件夹,创建了几十个文档,又删除了几十个文档,失败的过程就不说了,
直接把成功的代码一步一步写下来!!!!!!!
国际化代码步骤:
1、安装i18n
因为我们用的是vue2,所以要找到适合vue2的i18n版本,我找到的是vue-i18n的8.27.0版本:
yarn add vue-i18n@8.27.0 --save
安装好包后去package.json中检查安装版本和安装情况:
2、构造所需文件夹和文档:
在src文件夹下,新建一个文件夹叫language,在这个文件夹下新建两个json文件,分别叫en-US.json和zh-CH.json供后面使用:
3、在建好的文档中写入自己需要的内容:
en-US.json:
zh-CH.json:
en-US.json:
{
"langName": "english",
"menuList": {
"home": "Home",
"user": "User management",
"roles": "Role management",
"notice": "Notice Announcement",
"logs": "log management"
}
}
zh-CH.json:
{
"langName": "中文",
"menuList": {
"home": "主页",
"user": "用户管理",
"roles": "角色管理",
"notice": "通知公告",
"logs": "日志管理"
}
}
4、在main.js中去定义他们:
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: "zh-CN", // 这里是开始的默认语言,我这里默认是中文
messages: {
"zh-CN": require("./language/zh-CH.json"), // 这里是在找语言所在的文件位置
"en-US": require("./language/en-US.json"),
},
});
new Vue({
i18n, //把 i18n 挂载到 vue 根实例上components
render: (h) => h(App),
}).$mount("#app");
5、在组件中使用(通过$t(‘xxx’))的方式中使用:
<template>
<div class="menuWrap">
{{ $t("langName") }} <!--这li的langName就是你的文件中定义的属性名字-->
<div class="langWrap">
<!--这里定义两个按钮,点击切换中英文-->
<button class="langInner" @click="handleCh" v-if="china">中文</button>
<button class="langInner" @click="handleEn" v-if="eng">英文</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
china: false,
eng: true,
};
},
methods: {
handleCh() {
// 这里我在页面中只显示一个按钮,所以点击的时候切换按钮的v-if
this.china = false;
this.eng = true;
this.$i18n.locale = "zh-CN";
// 中文按钮点击将main.js中定义的初始值locale转换为中文
},
handleEn() {
this.china = true;
this.eng = false;
this.$i18n.locale = "en-US";
// 英文按钮点击将main.js中定义的初始值locale转换为英文
},
},
};
</script>
6、成品展示:
初始值: 字体初始值为中文,按钮显示是切换成英文
点击英文按钮后:字体显示为英文,按钮显示切换成中文
结束!!!!!!!!!!整整两天的努力,太有成就感了!