使用 vue-i18n 切换中英文效果


Posted in Javascript onMay 23, 2018

vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n

兼容性:

支持 Vue.js 2.x 以上版本

安装方法:(此处只演示 npm)

npm install vue-i18n

使用方法:

1、在 main.js 中引入 vue-i18n (前提是要先引入 vue)

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

2、准备本地的翻译信息

const messages = {
 zh: {
  message: {
  hello: '好好学习,天天向上!'
  }
 },
 en: {
  message: {
  hello: 'good good study, day day up!'
  }
 }
}

3、创建带有选项的 VueI18n 实例

const i18n = new VueI18n({
 locale: 'en', // 语言标识
 messages
})

4、把 i18n 挂载到 vue 根实例上

const app = new Vue({
 router,
 i18n,
 ...App
}).$mount('#app')

5、在 HTML 模板中使用

<div id="app">
 <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
 </div>

查看运行效果:

使用 vue-i18n 切换中英文效果

我们刚才选定的语言标识是 “en” 英语,现在改成 “zh” 中文,并查看效果

const i18n = new VueI18n({
 locale: 'zh', // 语言标识
 messages
})

使用 vue-i18n 切换中英文效果

这样就可以轻松实现国际化了,实际开发中,页面内容肯定是很多的,我们可以把对应语言的信息保存为不同的 json对象

const i18n = new VueI18n({
 locale: 'en', // 语言标识
 messages: {
  'zh': require('./common/lang/zh'),
  'en': require('./common/lang/en')
 }
})

zh.js

// 注意:一定是 exports,不是 export,否则会报错,报错信息是下列的中的内容不是 string
module.exports = {
 message: {
  title: '运动品牌'
 },
 placeholder: {
  enter: '请输入您喜欢的品牌'
 },
 brands: {
  nike: '耐克',
  adi: '阿迪达斯',
  nb: '新百伦',
  ln: '李宁'
 }
}

en.js

module.exports = {
 message: {
  title: 'Sport Brands'
 },
 placeholder: {
  enter: 'Please type in your favorite brand'
 },
 brands: {
  nike: 'Nike',
  adi: 'Adidas',
  nb: 'New Banlance',
  ln: 'LI Ning'
 }
}

接下来,在HTML 模板中使用,要特别注意在 js 中的国际化写法

// HTML
<div id="app">
 <div style="margin: 20px;">
  <h1>{{$t("message.title")}}</h1>
  <input style="width: 300px;" class="form-control" :placeholder="$t('placeholder.enter')">
  <ul>
  <li v-for="brand in brands">{{brand}}</li>
  </ul>
 </div>
</div>
// JS
data () {
 return {
  brands: [this.$t('brands.nike'), this.$t('brands.adi'), this.$t('brands.nb'), this.$t('brands.ln')]
 }
 },

查看编译效果:

使用 vue-i18n 切换中英文效果

现在换成英文的:

使用 vue-i18n 切换中英文效果

在上面的操作中,我们都是通过手动修改 locale 的属性值来切换语言,实际上,更希望浏览器自动识别,这里可以借助于 cookie

1、新建一个 cookie.js 文件,用于读取cookie

function getCookie(name,defaultValue) {
 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
 if (arr = document.cookie.match(reg))
 return unescape(arr[2]);
 else
 return defaultValue;
}
export {
 getCookie
}

2、在 main.js 中引入这个js,并通过 PLAY_LANG 属性来获取浏览器的语言

const i18n = new VueI18n({
 locale: getCookie('PLAY_LANG','zh'), // 语言标识
 messages: {
  'zh': require('./common/lang/zh'),
  'en': require('./common/lang/en')
 }
})

这里需要注意两个极易出错的地方:

(1)、将 $t() 写成了 $()

使用 vue-i18n 切换中英文效果

(2)、json 中在同一个对象里有同名属性

使用 vue-i18n 切换中英文效果

vue-i18n 提供了一个全局配置参数叫 “locale”,通过改变 locale 的值可以实现不同语种的切换

使用 vue-i18n 切换中英文效果

下面的案例借用了 Element UI 的弹窗样式,上面的步骤不再赘述,直接上核心代码

// template
<h2>{{$t('test')}}</h2>
<button type="button" class="btn btn-success" @click="changeLocale">中文/EN</button>  

// js方法
changeLocale () {
 this.$confirm(this.$t('layer.toggle'), this.$t('layer.tips'), {
  confirmButtonText: this.$t('button.ok'),
  cancelButtonText: this.$t('button.cancel'),
  type: 'warning'
  }).then(() => {
   let locale = this.$i18n.locale
   locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
  }).catch(() => {
    this.$message({
     type: 'info',
     })  
  })
},

效果:

使用 vue-i18n 切换中英文效果

总结

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

Javascript 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
一个加载js文件的小脚本
Jun 28 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
js实现简单选项卡功能
Mar 23 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
centos 上快速搭建ghost博客方法分享
May 23 #Javascript
20个最常见的jQuery面试问题及答案
May 23 #jQuery
AngularJS与BootStrap模仿百度分页的示例代码
May 23 #Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 #jQuery
vue的传参方式汇总和router使用技巧
May 22 #Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 #Javascript
Vue.js实现的表格增加删除demo示例
May 22 #Javascript
You might like
一个用于网络的工具函数库
2006/10/09 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
Element Input组件分析小结
2018/10/11 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python多继承顺序实例分析
2018/05/26 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
旅游节目策划方案
2014/05/26 职场文书
职业规划实施方案
2014/06/10 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
财务稽核岗位职责
2015/04/13 职场文书
趣味运动会广播稿
2015/08/19 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
JavaScript组合继承详解
2021/11/07 Javascript
TS 类型兼容教程示例详解
2022/09/23 Javascript