利用vue-i18n实现多语言切换效果的方法


Posted in Javascript onJune 19, 2019

前言

有些项目我们需要支持多种语言切换,满足国际化需求。 vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。

安装vue-i18n

我们使用npm安装vue-i18n。

npm install vue vue-i18n --save

引入vue-i18n

首先在 main.js 中引入 vue-i18n。

import Vue from 'vue'
import App from './App'
import VueI18n from 'vue-i18n'

 
Vue.use(VueI18n) // 通过插件的形式挂载

接着创建带有选项的 VueI18n 实例。

const i18n = new VueI18n({
 locale: localStorage.getItem('locale') || 'zh-CN',
 //this.$i18n.locale // 通过切换locale的值来实现语言切换
 messages: {
  'zh-CN': require('./lang/zh'), // 中文语言包
  'en-US': require('./lang/en') // 英文语言包
 }
})

注意实例中加载了中英文两个语言包。分别准备两个语言包, 使用require引入到main.js中:

中文语言包:zh.js

export const m = {
  welcome: '欢迎来到北京',
  today: '今天是',
  week: {
  sun: '星期日',
  mon: '星期一',
  tues: '星期二',
  wed: '星期三',
  thur: '星期四',
  fri: '星期五',
  sat: '星期六'
  }
}

英文语言包: en.js

export const m = { 
 welcome: 'Welcome to Beijing.',
 today: 'Today is ',
 week: {
 sun: 'Sunday',
 mon: 'Monday',
 tues: 'Tuesday',
 wed: 'Wednesday',
 thur: 'Thursday',
 fri: 'Friday',
 sat: 'Saturday'
 }
}

然后把 i18n 挂载到 vue 根实例上:

new Vue({
 el: '#app',
 i18n,
 components: { App },
 template: '<App/>'
})

使用vue-i18n

我们先建立模板:

<button @click="changeLang">切换语言</button>
 <h1>{{$t('m.welcome')}}</h1>
 <h3>{{$t('m.today')}}{{weekname}}</h3>

注意用法,在组件的模板template中,调用 $t() 方法, {{$t('m.welcome')}} 表示使用welcome的语言。如果是在组件的script中,调用 this.$i18n.t() 方法获取语言,下文会讲到。

我们想通过点击“切换语言”按钮,来对模板中的文字内容进行相应的语言切换。

那我们就在方法 changeLang() 中这样写:

changeLang() {
  this.lang = localStorage.getItem('locale') || 'zh-CN';
  
  if ( this.lang === 'zh-CN' ) {
   this.lang = 'en-US';
   this.$i18n.locale = this.lang;
  } else {
   this.lang = 'zh-CN';
   this.$i18n.locale = this.lang;
  }
  localStorage.setItem('locale', this.lang);
  let week = this.getWeek();
  this.weekname = week;
 },

我们先在本地存储中获取 locale 的值,如果不存在则默认为 zh-CN 。然后在判断当前语言是中文还是英文,如果是中文则切换成英文,反之亦然。通过 this.$i18n.locale 实现语言的切换。

我们希望浏览器保存每次切换后的语言,用户刷新页面的时候会自动识别语言。因此我们使用 localStorage 本地存储来保存每次设置后的语言,当然你也可以使用 coockie 实现。

有时候我们要在js部分处理多语言,例如以下 getWeek() 部分实现了当前是星期几的代码,仅供参考。

getWeek() {
  let week = new Date().getDay(); 
  let day = 'm.week.sun';
  switch (week) {
  case 0:
   day = 'm.week.sun';
   break;
  case 1:
   day = 'm.week.mon';
   break;
  case 2:
   day = 'm.week.tues';
   break;
  case 3:
   day = 'm.week.wed';
   break;
  case 4:
   day = 'm.week.thur';
   break;
  case 5:
   day = 'm.week.fri';
   break;
  case 6:
   day = 'm.week.sat';
   break;
  }
  return this.$i18n.t(day);
 }

以上就是使用vue-i18n实现中英文语言切换效果的详细内容。有关vue-i18n的更多用法可以参考项目地址: http://kazupon.github.io/vue-i18n/

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 #jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 #jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 #jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 #jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 #jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 #jQuery
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
javascript 模拟点击广告
2010/01/02 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
Python简易版停车管理系统
2019/08/12 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python页面加载的等待方式总结
2021/02/28 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
空指针到底是什么
2012/08/07 面试题
.net C#面试题
2012/08/28 面试题
配件采购员岗位职责
2013/12/03 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
单位租房协议范本
2014/12/03 职场文书
网络营销计划书
2015/01/17 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
社会实践单位意见
2015/06/05 职场文书