好资源导航 » 文章资讯 » vue中英文切换实例代码

vue中英文切换实例代码

2023-08-02 17:15:04 73

1、安装vue-i18n依赖

yarnaddvue-i18n或者npminstallvue-i18n--save-dev

2、在src/components下新建文件夹language，并在文件夹language下新建zh.js及en.js

【src/components/language/zh.js】
module.exports={
language:{
name:'English'
},
user:{
login:'登录',
register:'注册',
loginUsername:'请输入邮箱/手机号',
}
}

【src/components/language/en.js】
module.exports={
language:{
name:'中文'
},
user:{
login:'login',
register:'register',
loginUsername:'pleaseinputemailorphone',
}
}

3、在main.js下引入及注册vue-i18n

//中英文切换
importVueI18nfrom'vue-i18n'
Vue.use(VueI18n)
consti18n=newVueI18n({
locale:localStorage.getItem('languageSet')||'zh',//从localStorage里获取用户中英文选择，没有则默认中文
messages:{
'zh':require('./components/language/zh'),
'en':require('./components/language/en')
}
})

newVue({
el:'#app',
router,
i18n,//把i18n挂载到vue根实例上
components:{
App
},
render:h=>h(App),
})

4、使用

返回顶部
514930285
czq8825@qq.com

vue中英文切换实例代码

随机推荐