环境:vue: 2.6.10,vue-i18n: 8.28.2
安装插件
npm install vue-i18n@8
在package.json中检查
在main.js中引入
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: localStorage.getItem('lang') || 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh': require('@/assets/VueI18n/language-zh'),
'en': require('@/assets/VueI18n/language-en'),
'fn': require('@/assets/VueI18n/language-fn')
}
})
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
assets/VueI18n/language-en.js中定义对应几种语言的展示内容,每个文件变量名需要一样
module.exports = {
langage:{
ch:"CH",
en:"EN",
fn:"FN"
},
login: {
title:"Login",
message: "Welcome Sign In",
}
.....几个语言就几个js
}
使用
几个切换语言的按钮
<div class="langages">
<span @click="changeLaguageZhEnFn('zh')">{{$t('langage.ch')}}</span>
<span @click="changeLaguageZhEnFn('en')">{{$t('langage.en')}}</span>
<span @click="changeLaguageZhEnFn('fn')">{{$t('langage.fn')}}</span>
</div>
changeLaguageZhEnFn(lang) {
this.$i18n.locale = lang;
this.lang = lang;
},
其他的文字展示
<div class="title-container">
<h3 class="title">{{$t("login.title")}}</h3>
</div>
<input :placeholder="$t(login.username)" maxlength="24">
防止当页面刷新 语言切换成初始状态 需要
localStorage.setItem('lang',"zh");
https://kazupon.github.io/vue-i18n/