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 相关文章推荐
JavaScript中Math对象使用说明
Jan 16 Javascript
通过修改referer下载文件的方法
May 11 Javascript
js 表格隔行颜色
Dec 02 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
js实现表格数据搜索
2020/08/09 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
python生成随机mac地址的方法
2015/03/16 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Django重设Admin密码过程解析
2020/02/10 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
医学检验专业自荐信
2014/09/18 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
小学教育见习总结
2015/06/23 职场文书