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 相关文章推荐
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
vue实现简单跑马灯效果
May 25 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
pw的一个放后门的方法分析
2007/10/08 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
javascript 验证日期的函数
2010/03/18 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
给校长的一封建议书
2014/03/12 职场文书
团代会宣传工作方案
2014/05/08 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
2015年维修工作总结
2015/04/25 职场文书
vue中div禁止点击事件的实现
2022/04/02 Vue.js
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript