Vue中使用vue-i18插件实现多语言切换功能


Posted in Javascript onApril 25, 2018

在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下:

step1: 在项目中安装vue-i18插件

cnpm install vue-i18n --save-dev

step2:在项目的入口文件main.js中引入vue-i18n插件 

import Vue from 'vue' 
import router from './router' 
import VueI18n from 'vue-i18n' 
Vue.use(VueI18n) 
const i18n = new VueI18n({ 
 locale: 'zh', // 语言标识 
 messages: { 
  'zh': require('./assets/lang/zh'), 
  'en': require('./assets/lang/en') 
 } 
}) 
// vue实例中引入 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 i18n, 
 router, 
 template: '<Layout/>', 
 components: { 
  Layout 
 }, 
})

step3:页面中使用

在模板中使用时,大概有以下3种情况,若有疏漏,望大家指正

zh.js

module.exports = { 
 menu : { 
   home:"首页" 
 }, 
 content:{ 
   main:"这里是内容" 
 } 
}

en.js

module.exports = { 
 menu : { 
   home:"home" 
 }, 
 content:{ 
   main:"this is content" 
 } 
}

1)在标签内作为正文内容

<div class="title">{{$t('menu.home')}}</div>

2)作为标签属性使用

<input :placeholder="$t('content.main')" type="text">

3)作为js中文字使用时

console.log(this.$t('content.main'));

4)待补充...

step4:页面上进行中英文切换,在中英文切换的按钮上绑定事件,如下:

tabEn: function () { 
 this.$i18n.locale = 'en' 
}, 
tabCn: function () { 
 this.$i18n.locale = 'zh' 
}

至此,vue-i18n插件使用完结。

总结

以上所述是小编给大家介绍的Vue中使用vue-i18插件实现多语言切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 #Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 #Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 #Javascript
详解Vue.js中.native修饰符
Apr 24 #Javascript
Vue 动态设置路由参数的案例分析
Apr 24 #Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 #Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 #Javascript
You might like
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
python版飞机大战代码分享
2018/11/20 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
自考自我鉴定范文
2013/10/30 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
二手房购房协议书范本
2014/10/05 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
幼师小班个人总结
2015/02/12 职场文书
高中数学教学反思范文
2016/02/18 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers