在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下:
<强>步骤1:在项目中安装vue-i18插件
cnpm安装vue-i18n——save-dev
<强>步骤2:在项目的入口文件main.js中引入vue-i18n插件,
从“Vue”进口Vue
从“进口路由器。/路由器的
从“vue-i18n”进口VueI18n
Vue.use (VueI18n)
const i18n=new VueI18n ({
地区:zh型,//语言标识
消息:{
“zh型”:要求(“。/资产/lang/zh型”),
“en”:要求(“/资产/lang/en。”)
}
}）//vue实例中引入/* eslint-disable没有新*/新Vue ({
埃尔:“#应用”,
i18n,
路由器,
模板:& lt;布局/祝辞,
组件:{
布局
},
})
<强>步骤3:页面中使用
在模板中使用时,大概有以下3种情况,若有疏漏,望大家指正
zh型。js
模块。出口={
菜单:{
家:“首页”
},
内容:{
主:“这里是内容”
}
}
en.js
模块。出口={
菜单:{
:“家”
},
内容:{
主:“这是内容”
}
}
1)在标签内作为正文内容
& lt; div类="标题"在{{$ t (menu.home)}} & lt;/div>之前
2)作为标签属性使用
& lt;输入:占位符=" $ t (content.main)”类型=拔谋尽北?之前
3)作为js中文字使用时
console.log(这一点。$ t (' content.main '));之前
4)待补充…
目的:页面上进行中英文切换,在中英文切换的按钮上绑定事件,如下:
tabEn:函数(){
美元i18n。语言环境='恩'
},
tabCn:函数(){
美元i18n。语言环境=zh型的
}
至此,vue-i18n插件使用完结。
以上所述是小编给大家介绍的Vue中使用vue-i18插件实现多语言切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
