使用 vue-i18n 切换中英文效果


Posted in Javascript onMay 23, 2018

vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n

兼容性:

支持 Vue.js 2.x 以上版本

安装方法:(此处只演示 npm)

npm install vue-i18n

使用方法:

1、在 main.js 中引入 vue-i18n (前提是要先引入 vue)

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

2、准备本地的翻译信息

const messages = {
 zh: {
  message: {
  hello: '好好学习,天天向上!'
  }
 },
 en: {
  message: {
  hello: 'good good study, day day up!'
  }
 }
}

3、创建带有选项的 VueI18n 实例

const i18n = new VueI18n({
 locale: 'en', // 语言标识
 messages
})

4、把 i18n 挂载到 vue 根实例上

const app = new Vue({
 router,
 i18n,
 ...App
}).$mount('#app')

5、在 HTML 模板中使用

<div id="app">
 <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
 </div>

查看运行效果:

使用 vue-i18n 切换中英文效果

我们刚才选定的语言标识是 “en” 英语,现在改成 “zh” 中文,并查看效果

const i18n = new VueI18n({
 locale: 'zh', // 语言标识
 messages
})

使用 vue-i18n 切换中英文效果

这样就可以轻松实现国际化了,实际开发中,页面内容肯定是很多的,我们可以把对应语言的信息保存为不同的 json对象

const i18n = new VueI18n({
 locale: 'en', // 语言标识
 messages: {
  'zh': require('./common/lang/zh'),
  'en': require('./common/lang/en')
 }
})

zh.js

// 注意:一定是 exports,不是 export,否则会报错,报错信息是下列的中的内容不是 string
module.exports = {
 message: {
  title: '运动品牌'
 },
 placeholder: {
  enter: '请输入您喜欢的品牌'
 },
 brands: {
  nike: '耐克',
  adi: '阿迪达斯',
  nb: '新百伦',
  ln: '李宁'
 }
}

en.js

module.exports = {
 message: {
  title: 'Sport Brands'
 },
 placeholder: {
  enter: 'Please type in your favorite brand'
 },
 brands: {
  nike: 'Nike',
  adi: 'Adidas',
  nb: 'New Banlance',
  ln: 'LI Ning'
 }
}

接下来,在HTML 模板中使用,要特别注意在 js 中的国际化写法

// HTML
<div id="app">
 <div style="margin: 20px;">
  <h1>{{$t("message.title")}}</h1>
  <input style="width: 300px;" class="form-control" :placeholder="$t('placeholder.enter')">
  <ul>
  <li v-for="brand in brands">{{brand}}</li>
  </ul>
 </div>
</div>
// JS
data () {
 return {
  brands: [this.$t('brands.nike'), this.$t('brands.adi'), this.$t('brands.nb'), this.$t('brands.ln')]
 }
 },

查看编译效果:

使用 vue-i18n 切换中英文效果

现在换成英文的:

使用 vue-i18n 切换中英文效果

在上面的操作中,我们都是通过手动修改 locale 的属性值来切换语言,实际上,更希望浏览器自动识别,这里可以借助于 cookie

1、新建一个 cookie.js 文件,用于读取cookie

function getCookie(name,defaultValue) {
 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
 if (arr = document.cookie.match(reg))
 return unescape(arr[2]);
 else
 return defaultValue;
}
export {
 getCookie
}

2、在 main.js 中引入这个js,并通过 PLAY_LANG 属性来获取浏览器的语言

const i18n = new VueI18n({
 locale: getCookie('PLAY_LANG','zh'), // 语言标识
 messages: {
  'zh': require('./common/lang/zh'),
  'en': require('./common/lang/en')
 }
})

这里需要注意两个极易出错的地方:

(1)、将 $t() 写成了 $()

使用 vue-i18n 切换中英文效果

(2)、json 中在同一个对象里有同名属性

使用 vue-i18n 切换中英文效果

vue-i18n 提供了一个全局配置参数叫 “locale”,通过改变 locale 的值可以实现不同语种的切换

使用 vue-i18n 切换中英文效果

下面的案例借用了 Element UI 的弹窗样式,上面的步骤不再赘述,直接上核心代码

// template
<h2>{{$t('test')}}</h2>
<button type="button" class="btn btn-success" @click="changeLocale">中文/EN</button>  

// js方法
changeLocale () {
 this.$confirm(this.$t('layer.toggle'), this.$t('layer.tips'), {
  confirmButtonText: this.$t('button.ok'),
  cancelButtonText: this.$t('button.cancel'),
  type: 'warning'
  }).then(() => {
   let locale = this.$i18n.locale
   locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
  }).catch(() => {
    this.$message({
     type: 'info',
     })  
  })
},

效果:

使用 vue-i18n 切换中英文效果

总结

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

Javascript 相关文章推荐
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
centos 上快速搭建ghost博客方法分享
May 23 #Javascript
20个最常见的jQuery面试问题及答案
May 23 #jQuery
AngularJS与BootStrap模仿百度分页的示例代码
May 23 #Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 #jQuery
vue的传参方式汇总和router使用技巧
May 22 #Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 #Javascript
Vue.js实现的表格增加删除demo示例
May 22 #Javascript
You might like
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
vue的过滤器filter实例详解
2018/09/17 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Python实现CET查分的方法
2015/03/10 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
社区灵活就业证明
2014/11/03 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
redis 查看所有的key方式
2021/05/07 Redis