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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
vue通过过滤器实现数据格式化
Jul 20 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生成静态页
2006/11/25 PHP
推荐php模板技术[转]
2007/01/04 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
js实现文字截断功能
2016/09/14 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
使用Python中的cookielib模拟登录网站
2015/04/09 Python
python机器学习之决策树分类详解
2017/12/20 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
python对日志进行处理的实例代码
2018/10/06 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
百度JavaScript笔试题
2015/01/15 面试题
如何掌握自荐信格式呢
2013/11/19 职场文书
材料采购员岗位职责
2013/12/17 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
本科生自荐信
2014/06/18 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
企业团队精神心得体会
2016/01/19 职场文书