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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
详解JS ES6编码规范
May 07 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 日,周,月点击排行统计
2012/01/11 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
php实现水仙花数示例分享
2014/04/03 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
大学生创业计划书的范文
2014/01/07 职场文书
办理收楼委托书范本
2014/10/09 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android