使用 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 相关文章推荐
javascript入门基础之私有变量
Feb 23 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
js倒计时简单实现方法
Dec 17 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
js调用刷新界面的几种方式
May 03 Javascript
js编写简单的计时器功能
Jul 15 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
Js图片点击切换轮播实现代码
Jul 27 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
实用函数10
2007/11/08 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
php实现每日签到功能
2018/11/29 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
pandas 层次化索引的实现方法
2019/07/06 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Django ORM filter() 的运用详解
2020/05/14 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
《王二小》教学反思
2014/02/27 职场文书
公司新年寄语
2014/04/04 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
员工合理化建议书
2014/05/19 职场文书
植树造林的宣传标语
2014/06/23 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技