利用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源码解读之removeAttr()方法分析
Feb 20 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
js实现3D照片墙效果
Oct 28 Javascript
vue接口请求加密实例
Aug 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
PHP 采集程序中常用的函数
2009/12/09 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
用原生js做单页应用
2017/01/17 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
HTML5进度条特效
2014/12/18 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
行政经理岗位职责
2013/11/09 职场文书
大学生简单自荐信
2013/11/10 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python