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 相关文章推荐
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
js实现分割上传大文件
Mar 09 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
谈谈JavaScript中的函数
Sep 08 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读取XML值的代码(推荐)
2011/01/01 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python切片知识解析
2016/03/06 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python3.x实现发送邮件功能
2018/05/22 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
如何用Python合并lmdb文件
2018/07/02 Python
python实现五子棋小游戏
2020/03/25 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
注塑工厂厂长岗位职责
2013/12/02 职场文书
实习自我鉴定
2013/12/15 职场文书
廉政教育心得体会
2014/01/01 职场文书
中国文明网签名寄语
2014/01/18 职场文书
班班通项目实施方案
2014/02/25 职场文书
感恩寄语大全
2014/04/11 职场文书
人事经理岗位职责
2014/04/28 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
求职信如何撰写?
2019/05/22 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL