i18n:i18n是 Internationalization 这个英文的简写,即国际化的意思,vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换,以适应不同地区用户的需求。
1.安装vue-i18n
npm install vue-i18n --save
2.main.js中全局引入i18n
import VueI18n from "vue-i18n";
3.注册:
Vue.use(VueI18n);
4.实例化i18n并引入语言文件:
const i18n = new VueI18n({
locale: "en",//语言标识
messages: {//配置多语言 根据自己的项目需求 这里配置了中文和英文
'zh': require('@/lang/zh.js'),//中文
'en': require('@/lang/en.js'),//英文
},
fallbackLocale: "zh",//没有英文的时候默认 中文语言
silentTranslationWarn: true,//报错时加上这个参数可以取消警告
//this.$i18n.locale // 通过切换locale的值来实现语言切换
});
5.在vue实例中注册:
let VM = new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount("#app");
6.src/lang/zh.js:
module.exports = {
name:"今天天气真好啊",
m:{
a:"锄禾日当午",
b:"汗滴禾下土"
}
}
src/lang/en.js:
module.exports = {
name:"farmers are weeding at noon",
m:{
a:"Sweat drops on the soil"
}
}
7.页面中使用:
<h1>{{$t('name')}}</h1>
<h1>{{$t('m.a')}}</h1>
<h1>{{$t('m.b')}}</h1>
<button @click="toggleLang">语言切换</button>
动态切换多语言:
toggleLang(){
if(this.$i18n.locale == 'en'){
this.$i18n.locale = 'zh'
}else{
this.$i18n.locale = 'en'
}
}