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 获取select下拉列表值的代码
Sep 07 Javascript
jQuery bind事件使用详解
May 05 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
利用JS如何获取form表单数据
Dec 19 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
改造一台复古桌面收音机
2021/03/02 无线电
基于文本的留言簿
2006/10/09 PHP
php header功能的使用
2013/10/28 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
Javascript验证方法大全
2015/09/21 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
python实现简单多人聊天室
2018/12/11 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
python如何建立全零数组
2020/07/19 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
个人工作保证书
2015/02/28 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
详解python的异常捕获
2022/03/03 Python
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript