vue使用i18n实现国际化的方法详解


Posted in Javascript onSeptember 05, 2019

一、前言

在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具。比如:

  • vue + vue-i18n
  • angular + angular-translate
  • react + react-intl
  • jquery + jquery.i18n.property

在4K广告机项目中使用的前端框架为Vue,故而我们将使用vue-i18n这个插件进行国际化功能的实现。

二、最终实现效果

vue使用i18n实现国际化的方法详解

三、国际化的实现

1、首先在自己的项目中安装 vue-i18n依赖包。这里使用NPM进行安装,如果没有科学上网请使用CNPM进行安装。

npm install vue-i18n --save-dev

2、将i18n引入vue实例中,在项目中实现调用API和模板语法。现在在main.js中引入 vue-i18n。

import VueI18n from 'vue-i18n'  //引入vue-i18n

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

/*---------基本使用-----------*/
const i18n = new VueI18n({
 locale: 'CN', // 语言标识
 messages : {
 en: {
  message: {
  hello: 'hello world'
  }
 },
 cn: {
  message: {
  hello: '你好、世界'
  }
 }
 }
})
/*---------使用语言包-----------*/
const i18n = new VueI18n({
 locale: 'zh', // 语言标识
 //this.$i18n.locale // 通过切换locale的值来实现语言切换
 messages: {
  'zh': require('./common/lang/zh'), // 中文语言包
  'en': require('./common/lang/en') // 英文语言包
 }
})

/* eslint-disable no-new */
new Vue({
 el: '#app',
 i18n,  //挂载到实例,一定得在这个位置,而不是comonents中
 template: '<App/>',
 components: {
 App
 }
});

上面的代码正式将 vue-i18n 引入 vue 项目中,创建一个 i18n 实例对象,方便全局调用。我们通过 this.$i18n.locale 来进行语言的切换。

3、接下来我们就需要新建两个js文件(或者josn文件)作为语言包。

vue使用i18n实现国际化的方法详解

其中en.js语言包中代码为:

module.exports = {
 message: {
 login: 'Login',
 Username: 'Username',
 Password: 'Password',
 Captcha: 'Captcha',
 Language: 'Language',
 zh: 'Chinese',
 en: 'English'
 }
}

其中zh.js语言包中代码为:

module.exports = {
 message: {
 login: '登录',
 Username: '用户名',
 Password: '密码',
 Captcha: '验证码',
 Language: '语言',
 zh: '中文',
 en: '英文'
 }
}

最后我们只需要通过触发事件的形式,来控制 locale 的值,去调用对应的语言包就可以实现国际化啦。

4、组件中触发事件切换 locale 的值,从而实现语言的切换。template代码:

<div class="lang">
 <el-radio-group v-model="language" size="mini">
  <el-radio v-for="item of lang" :label="item.value" border>{{item.label}}</el-radio>
 </el-radio-group>
</div>

scrpit代码:

import Vue from 'vue'

 export default {
 mounted() {
  this.$i18n.locale === 'zh' ? this.language = 0 : this.language = 1 //数据加载时判断当前属于哪种语言,为其单选按钮赋值
 },
 data() {
  return {
  language: 0,
  lang: [{
   label: this.$t('message.zh'),  //模板语法的一种
   value: 0
  }, {
   label: this.$t('message.en'),
   value: 1
  }],
  }
 },
 watch: { //侦听器
  language: function (val) {  //侦听单选按钮的变化,从而进行切换语言
  val === 0 ? this.$i18n.locale = 'zh' : this.$i18n.locale = 'en';
  Vue.set(this.lang, 0, {label: this.$t('message.zh'), value: 0});
  Vue.set(this.lang, 1, {label: this.$t('message.en'), value: 1})
  /**
  this.lang: [{
   label: this.$t('message.zh'),  //如果不使用Vue.set,也可以使用更新数据的方法
   value: 0
  }, {
   label: this.$t('message.en'),
   value: 1
  }]
  **/
  }
 },
 }

注意:由于 JavaScript 的限制,Vue 不能检测当前变动的数组,只渲染一次,如果数据不更新视图就不更新的组件,如果切换语言则需要更新一下数据才能切换组件内的多语言。

四、vue-i18n 数据渲染的模板语法

模板语法暂时分为三种:

//vue组件模板的使用
<div>{{$t('message.zh')}}</div>

//vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"></input>

//vue组件data中赋值的使用
data:{
 msg:this.$t('message.zh');
}

五、Element UI组件库与vue-i18n的兼容问题

由于项目中使用了Element UI组件库,它里面内置的一些文字也是需要国际化,好在Element UI是有国际化的支持。但是Element UI默认只兼容vue-i18n的5.x版本,而现在vue-i18n的版本已经到了7.x,Element UI官方文档中“国际化”一节中对此有具体说明。下面将手动设置内容贴出来:

import Vue from 'vue'
import ElementUI from 'element-ui'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'  //引入Element UI的英文包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'  //引入Element UI的中文包

Vue.use(VueI18n);
Vue.use(ElementUI, {
 i18n: (key, value) => i18n.t(key, value)
}); //兼容i18n 7.x版本设置

const i18n = new VueI18n({
 locale: 'zh', // 语言标识
 messages: {
 zh: Object.assign(require('@/components/common/lang/zh'), zhLocale), //这里需要注意一下,是如何导入多个语言包的
 en: Object.assign(require('@/components/common/lang/en'), enLocale),
 }
});

注意:关于导入多个语言包时遇到的问题,我是在Element UI 国际化文档中发现的解决办法。

六、路由与面包屑导航国际化的语法问题

在对面包屑导航进行国际化时不知道如何进行。在网上翻阅了一些资料,得到如下代码,完美解决问题:
router.js(路由配置文件)

{
 path: '/index',
 name: 'nav.Home',  //直接点出对应的文字
 component: (resolve) => require(['@/components/index'], resolve)
}

Breadcrumb.vue(面包屑导航组件)

<div id="Breadcrumb">
 <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/index' }">{{$t('nav.Home')}}</el-breadcrumb-item>
  /*注意{{$t(item.name)}}*/
  <el-breadcrumb-item v-for="item in $route.matched" :to="{ path: item.path}">{{$t(item.name)}}</el-breadcrumb-item>
 </el-breadcrumb>
 </div>

七、至此,国际化的坑算是踩完了。

总结

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

Javascript 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 #Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 #Javascript
React路由鉴权的实现方法
Sep 05 #Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 #Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 #Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 #Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 #Javascript
You might like
php引用传值实例详解学习
2013/11/06 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
jquery 通过name快速取值示例
2014/01/24 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
js判断节假日实例代码
2017/12/27 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python程序变成软件的实操方法
2019/06/24 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
中专三年学习的个人自我评价
2013/12/12 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
个人职业及收入证明
2014/10/13 职场文书
新郎新娘致辞
2015/07/31 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫