使用 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 相关文章推荐
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 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
第八节 访问方式 [8]
2006/10/09 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
javascript中 try catch用法
2015/08/16 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
Python Pandas 箱线图的实现
2019/07/23 Python
python opencv如何实现图片绘制
2020/01/19 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
PHP如何自定义函数
2016/09/16 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
中学校庆方案
2014/03/17 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
项目验收申请报告
2015/05/15 职场文书
城南旧事电影观后感
2015/06/16 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python