利用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 相关文章推荐
jquery实现点击变换导航样式的方法
Aug 31 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
微信小程序日历效果
Dec 29 Javascript
详解vue引入子组件方法
Feb 12 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
javascript Canvas动态粒子连线
Jan 01 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的5个入手程序
2006/11/23 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
详解react-redux插件入门
2018/04/19 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python中什么是面向对象
2020/06/11 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
高三物理教学反思
2016/02/20 职场文书