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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
Ajax常用封装库——Axios的使用
May 08 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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
php批量删除数据
2007/01/18 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python中文件的读取和写入操作
2018/04/27 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python中求对数方法总结
2020/03/10 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
Python3读写ini配置文件的示例
2020/11/06 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
服务标语大全
2014/06/18 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python