利用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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
react 路由Link配置详解
Nov 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
PHP:风雨欲来 路在何方?
2006/10/09 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
标准自荐信范文
2014/01/29 职场文书
高中军训感言800字
2014/03/05 职场文书
廉政教育的心得体会
2014/09/01 职场文书
党员对照检查材料
2014/09/22 职场文书
教师个人考察材料
2014/12/16 职场文书
运动会加油稿50字
2015/07/21 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书