使用 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修改地址栏URL参数解决url参数问题
Dec 15 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
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基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php设计模式小结
2013/02/15 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
python获取豆瓣电影简介代码分享
2014/01/16 Python
python机器学习之神经网络(二)
2017/12/20 Python
Django开发的简易留言板案例详解
2018/12/04 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
Python整数对象实现原理详解
2019/07/01 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
生产内勤岗位职责
2013/12/07 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
德育标兵事迹材料
2014/08/24 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
工作计划范文之财务管理
2019/08/09 职场文书