vue 国际化 vue-i18n 双语言 语言包


Posted in Javascript onJune 07, 2018

1.安装vue-i18n

2.在main.js里面引用

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

3.实例化i18n,并配置默认的语言模式,以及对应的文件(也是在main.js里使用)

如下。cn 中文包对应的是cn.js

en 对应的是英文 en.js 包

const i18n = new VueI18n({
 //定义默认语言
 locale: 'cn', 
 messages:{
  'cn': require('./common/lang/cn'),
  'en': require('./common/lang/en')
 }
})

4.cn.js 怎么写?

module.exports = {
  placeholder: {
    phone: '手机号',
    input_code: '输入验证码',
    passwordSix: '请输入6到18位密码'
  },
  sidebar: {
    MyAccount: '账户信息',
    PersonalInformation: '个人信息',
    Message: '我的消息',
    MyWallet: '我的钱包',
    MyProject: '我的方案'
  },
  home: {
    SendCode: 'Send verification code success'  
  }
}

当然 en.js 也需要配置一份

module.exports = {
  placeholder: {
    phone: 'Phone Number',
    input_code: 'Verification code',
    passwordSix: 'Please enter 6 to 18 Bit passwords'
  },
  sidebar: {
    MyAccount: 'My Account',
    PersonalInformation: 'Personal Information',
    Message: 'Message',
    MyWallet: 'My Wallet',
    MyProject: 'My Project'
  },
  home: {
    SendCode: 'send Code Success功'  
  }
}

5.如何在template中使用?

需要这样渲染出来

{{ $t("sidebar.MyWallet") }}
<li>{{ $t("sidebar.MyWallet") }}</li>

当然placeholder也是可以通过他来更改的。

<input type="text" v-model="phoneNumber" :placeholder="$t('placeholder.phone')"> 对应好配置好的placeholder就行。

中/English 切换函数

tag () {
  if (this.$i18n.locale === 'en') {
    this.$i18n.locale = 'cn'
  } else {
    this.$i18n.locale = 'en'
  }  
}

在js里如何拿配置过的语言来使用?

this.$t("sidebar.MyAccount")

这里我们使用了mint-ui框架中的Toast消息提示框,想让它根据语言环境来显示不同的提示语。

双语言前

Toast({message: '验证码发送成功'})

更改为双语言后

Toast({message: this.$t("home.SendCode")})

总结

以上所述是小编给大家介绍的vue 国际化 vue-i18n 双语言 语言包,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
vue cli2.0单页面title修改方法
Jun 07 #Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 #Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 #Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 #Javascript
AngularJS 前台分页实现的示例代码
Jun 07 #Javascript
浅谈PDF.js使用心得
Jun 07 #Javascript
You might like
教你php如何实现验证码
2016/01/20 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
JsonProperty 的使用方法详解
2019/10/11 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
python网络编程实例简析
2014/09/26 Python
python实现2048小游戏
2015/03/30 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
丧事答谢词
2015/01/05 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang