使用 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 相关文章推荐
js中有关IE版本检测
Jan 04 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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
我的论坛源代码(九)
2006/10/09 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
js输出列表实现代码
2010/09/12 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
利用JS实现数字增长
2016/07/28 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
js实现录音上传功能
2019/11/22 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python数据类型详解(二)列表
2016/05/08 Python
Python用threading实现多线程详解
2017/02/03 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
施工协议书范本
2014/04/22 职场文书
节约用水演讲稿
2014/05/21 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
民间个人借款协议书
2014/09/30 职场文书
公司开业主持词
2015/07/02 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL