时间:2021-05-26
1、vue-i18n安装
npm install vue-i18n --save-dev2、在main.js文件中引入
import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: localStorage.getItem('language')||'zh', //使用localStorage缓存到本地,当下次使用时可默认当前使用语言 messages: { ' zh': require('./common/lang/zh'), 'en': require('./common/lang/en') } }) new Vue({ el: '#app', router, i18n, template: '<App/>', components: { App } })3、新建中英文语言文件
zh.js:
module.exports = { language: { name: 'English' }, navbar: { home: '首页', } }en.js:
module.exports = { language: { name: '中文' }, navbar: { home: 'Home', } }4、创建一个切换语言方法(写在App.vue可以全局控制);
changeLang() { let locale = localStorage.getItem('language')||'zh'; let temp=locale === 'zh' ? 'en' : 'zh'; this.$i18n.locale=temp;//改变当前语言 localStorage.language=temp; }5、在template中的使用:
总结
以上所述是小编给大家介绍的vue 使用vue-i18n做全局中英文切换的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言Vue-i18n大家应该都不陌生,Vue-i18n安装的安装方法如下:npminstallvue-i18n--save然而最近在vue项目中使用vue-i1
vue-i18n仓库地址:https://github.com/kazupon/vue-i18n兼容性:支持Vue.js2.x以上版本安装方法:(此处只演示np
1.下载npminstallvue-i18n2.创建中英文包2.1中文包2.2英文包3.在main里面引入importVueI18nfrom"vue-i18n"
vue使用多语,最常见的就是vue-i18n,但是如果开发中的多语很少,比如就不到10个多语,这样就没必要引入vue-i18n了,引入了反正导致代码体积大了,这
1.安装vue-i18n2.在main.js里面引用importVueI18nfrom'vue-i18n'Vue.use(VueI18n)3.实例化i18n,并