vue 国际化i18n 多语言切换

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

安装

npm install vue-i18n

新建一个文件夹 i18n ，内新建 en.js zh.js index.js 三个文件

准备翻译信息

en.js

export default {
home: {
helloworld: "hello workd ！"
}
};

zh.js

export default {
home: {
helloworld: "你好世界"
}
};

index.js

创建Vue-i18n实例

import Vue from "vue";
import VueI18n from "vue-i18n";
import enLocale from "./en";
import zhLocale from "./zh";Vue.use(VueI18n);
const i18n = new VueI18n({
locale: localStorage.lang || "zh",
messages: {
en: {
...enLocale
},
zh: {
...zhLocale
}
}
});
export default i18n;

i18n 挂载到 vue 根实例

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from "./assets/i18n/index";Vue.config.productionTip = false;Vue.prototype.$i18n = i18n;new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount("#app");

简单的使用

about.vue

<template>
<div class="about">
<h1>{{ $t("home.helloworld") }}</h1>
<button @click="changeLang()">切换英文</button>
<p>{{hi}}</p>
</div>
</template><script>
export default {
data: function() {
return {};
},
computed: {
hi() {
return this.$t("home.helloworld");
}
},
methods: {
changeLang() {
this.$i18n.locale = "en";
}
}
};
</script>