背景
有的时候我们做的项目需要支持中英文切换，那么我们就需要使用到vue-i18n插件
步骤
安装以及挂载
- 安装
vue-i18n依赖
npm i vue-i18n@8
- 在
src同级的目录下创建language文件下，在language文件夹下新增3个文件(index.js，en.js，zh.js)
index.js
import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
// 引入自己应用需要支持语言配置文件
import zh from "./zh.js";
import en from "./en";
// 引入element的语言包
import ElementLocale from "element-ui/lib/locale";
import enLocale from "element-ui/lib/locale/lang/en";
import cnLocale from "element-ui/lib/locale/lang/zh-CN";
const i18n = new VueI18n({
// 设置默认语言
locale: window.localStorage.getItem("lang") || "cn",
messages: {
zh: {
...cnLocale,
...zh,
},
en: {
...enLocale,
...en,
},
},
});
ElementLocale.i18n((key, value) => i18n.t(key, value));
export default i18n;
en.js
const en = {
// 引入自己定义的模块
};
export default en;
zh.js
const zh = {
// 引入自己定义的模块
};
export default zh;
- 挂载到vue实例上
// main.js
import i18n from "./language";
new Vue({
render: (h) => h(App),
i18n,
}).$mount("#app");
创建语言文件
根据不同的模块在language/module下新增对应的语言文件，例如：下面针对首页以及用户页面新增home.js和user.js
中英文都定义在一个文件上容易维护
home.js
const home = {
// 定义中文
zh: {
home: "首页",
},
// 定义英文
en: {
home: "Home",
},
};
export default home;
user.js
const user = {
zh: {
user_mgr: "用户管理",
},
en: {
user_mgr: "User Managerment",
},
};
export default user;
在vue中的使用
- 在template中的使用
<h1>{{ $t("user.user_mgr") }}</h1>
- 在script标签中的使用
export default {
data() {
return {
msg: this.$t("home.home"),
};
},
created() {
console.log(this.msg);
},
};
功能1：切换中英文
<template>
<div class="app">
<button @click="changeLanuage">
切换成{{ lang == "zh" ? "EN" : "中文" }}
</button>
<h1>{{ $t("user.user_mgr") }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: this.$t("home.home"),
};
},
created() {
console.log(this.msg);
},
computed: {
lang() {
return this.$i18n.locale;
},
},
methods: {
changeLanuage() {
let setLang = "";
if (this.lang == "zh") {
setLang = "en";
} else {
setLang = "zh";
}
// 本地去记录选择的语言
window.localStorage.setItem("lang", setLang);
// 更新i18n中的语言
this.$i18n.locale = setLang;
},
},
};
</script>
<style scoped></style>
不刷新页面切换中英文
- 在data中定义的变量直接从i18n中读取，但是没有在模板上使用，在切换中英文的时候变量的值没变
解决办法：将data中声明的变量，换成在computed中声明。缺点：如果要更新这个变量的话，就需要设置set的方法，麻烦!! - 还是在data中定义变量，vue2的话使用
全局事件总线,在组件的created监听语言切换事件，监听后重新对变量赋值。切换时发射变更语言的事件
需要在组件中频繁写监听相关代码，麻烦。 - 在切换语言时将语言(lang)保存到vuex中，然后组件中通过
watch监听vuex中的lang，然后调用一个方法来更新组件中无法切换成对应语言的变量
App.vue
<template>
<div class="app">
<button @click="changeLanuage">
切换成{{ lang == "zh" ? "EN" : "中文" }}
</button>
<button @click="getVal">获取value值</button>
<h1>{{ $t("user.user_mgr") }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: this.$t("home.home"),
value: this.$t("user.user_mgr"),
};
},
created() {
// 方式2
// this.$bus.$on("changeLanguage", () => {
// this.updateData();
// });
},
computed: {
lang() {
return this.$i18n.locale;
},
// 方式1
// value() {
// return this.$t("user.user_mgr");
// },
},
methods: {
changeLanuage() {
let setLang = "";
if (this.lang == "zh") {
setLang = "en";
} else {
setLang = "zh";
}
// 本地去记录选择的语言
window.localStorage.setItem("lang", setLang);
// 更新i18n中的语言
this.$i18n.locale = setLang;
// this.$bus.$emit("changeLanguage");
this.$store.commit("changeLang", setLang);
},
getVal() {
console.log(this.value);
},
updateData() {
this.value = this.$t("user.user_mgr");
},
},
watch: {
// 方式3
"$store.state.lang"() {
this.updateData();
},
},
};
</script>
<style scoped></style>
store/index.js
import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
const store = new Vuex.Store({
state() {
return {
lang: "zh",
};
},
mutations: {
changeLang(state, playload) {
state.lang = playload;
},
},
});
export default store;
