vue实现网页语言国际化切换
更新时间：2021年11月29日 15:46:05 作者：SunFlower914
这篇文章介绍了vue实现网页语言国际化切换的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一、基本步骤
1：安装 yarn add vue-i18n
在此路径新建一个.js文件：src/lang/index.js后：
2:导入
import VueI18n from 'vue-i18n'
3:注册
import Vue from 'vue'
Vue.use(VueI18n)
4:实例化
const i18n=new VueI18n({
locale:'当前语言的标识'， // en:英文 zh:中文
messages:{
// 语言包
en:{
home:'home'
},
zh:{
home:'首页'
}
}
})
5:暴露出去
export default i18n
6:挂载到main.js
import i18n from '@/lang'
new Vue({
i18n
})
使用：<div>{{$t('home')}}</home>
二、在main.js中导入element-ui国际化语言配置
import i18n from './lang/index'
import ElementUI from 'element-ui'
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})
三、新建一个.vue文件通过按钮实现语言切换
注意：
this.$i18n.locale能获取与设置当前语言在js文件中使用国际化
四、实现网站菜单的国际化处理，需要在路由中引入
import i18n from '@/lang'后将i18n.t===this.$t
到此这篇关于vue实现网页语言国际化切换的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在运行Vue项目时遇到npm安装错误可使用命令npminstall--legacy-peer-deps解决,若VsCode中无法运行npm命令,则可能是IDE配置未生效,可尝试重启电脑或使用cmd命令行直接在项目目录下运行2024-10-10
本文给大家收藏整理了关于vue面试题汇总的一些知识,需要的朋友可以参考下2018-03-03
这篇文章主要为大家介绍了vue中使用axios请求post接口,请求会发送两次原因解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
今天小编就为大家分享一篇vue1.0和vue2.0的watch监听事件写法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
下面小编就为大家分享一篇vue2 全局变量的设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue中iframe 结合 window.postMessage 实现跨域通信
window.postMessage() 方法可以安全地实现跨源通信，在一个项目的页面中嵌入另一个项目的页面，需要实现父子，子父页面的通信，对Vue中iframe 结合 window.postMessage 实现跨域通信相关知识感兴趣的朋友跟随小编一起看看吧2022-12-12
这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue3子组件向父组件传递消息,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
要在Web页面中加入地图，我推荐你使用高德地图,下面这篇文章主要给大家介绍了关于Vue开发高德地图应用的最佳实践,需要的朋友可以参考下2021-07-07
公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题,这篇文章主要给大家介绍了关于在vue2中使用weixin-js-sdk的详细步骤,需要的朋友可以参考下2024-07-07
最新评论