使用 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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
JS实现4位随机验证码
Oct 19 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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
网页自动跳转代码收集
2009/09/27 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
js电话号码验证方法
2015/09/28 Javascript
javascript this详细介绍
2016/09/19 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
python查找第k小元素代码分享
2013/12/18 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
python测试mysql写入性能完整实例
2018/01/18 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
浅析python函数式编程
2020/09/26 Python
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
经贸日语专业个人求职信范文
2013/12/28 职场文书
公司年会演讲稿范文
2014/01/11 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
银行委托书范本
2014/09/28 职场文书
2014年化验员工作总结
2014/11/18 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
教你如何用cmd快速登录服务器
2022/06/10 Servers
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python