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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
如何用threejs实现实时多边形折射
May 07 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
php数字游戏 计算24算法
2012/06/10 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
pycharm显示远程图片的实现
2019/11/04 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
学前教育毕业生自荐信
2013/10/29 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
审计专业自荐信范文
2014/04/21 职场文书
团日活动总结模板
2014/06/25 职场文书
学习党章的体会
2014/11/07 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python