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 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
Angular表单验证实例详解
Oct 20 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
vue组件间的参数传递实例详解
Apr 26 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
php实现记事本案例
2020/10/20 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
javascript arguments使用示例
2014/12/16 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
Python实现分段线性插值
2018/12/17 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
浅谈Python type的使用
2019/11/19 Python
Python字典底层实现原理详解
2019/12/18 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
公司向个人借款协议书范本
2014/10/09 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript