Vue如何基于vue-i18n实现多国语言兼容


Posted in Javascript onJuly 17, 2020

vue中使用 vue-i18n 兼容多国语言

1.安装:npm install vue-i18n --save-dev

2.在main.js文件中引入:

import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载,通过全局方法 Vue.use() 使用插件const i18n = new VueI18n({
 locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
 messages: {
  'zh': require('./VueI18n/language-zh'), //
  'en': require('./VueI18n/language-en')
 }
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 i18n,
 components: { App },
 template: '<App/>'
})

3.在src下新建文件夹VueI18n(文件名字可自己定) 然后在文件夹下建立两个文件language-zh.js和language-en.js

你也可以创建的是两个json文件 如language-zh.json但是里面的格式也改成json格式

json 格式:

{
"lang":{


"home": "HHHHHHHHome",


"name": 'Chinese'

}
}

在main.js中引入这两个文件

Vue.use(VueI18n) // 通过插件的形式挂载,通过全局方法 Vue.use() 使用插件const i18n = new VueI18n({
 locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
 messages: {
  'zh': require('./VueI18n/language-zh'), //引入language-zh.js language-en,js
  'en': require('./VueI18n/language-en')
 }
})

Vue如何基于vue-i18n实现多国语言兼容

language-zh.js

Vue如何基于vue-i18n实现多国语言兼容

language-en.js

Vue如何基于vue-i18n实现多国语言兼容

4.在组件中开始使用

<template>
 <div class="content">
  <span>{{ $t('lang.home')}}</span>
  <span>{{ $t('lang.name')}}</span>
  <span @click="changeLaguages()">切换语言</span>
  <!-- <span v-if="lang==='zh'" @click="changezh" style="display:block" class="color">中文</span> -->
  <!-- <span v-else ="lang==='en'" @click="changeen" style="display:block">english</span> -->
 </div>
</template>

<script>
export default {
 data () {
  return {
   lang: 'zh'
  }
 },
 methods: {
  changeLaguages () {
   console.log(this.$i18n.locale)
   let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
   this.$i18n.locale = lang
  }
  // changezh () {
  //  this.lang = '中文'
  //  this.$i18n.locale = 'zh'
  // },
  // changeen () {
  //  this.lang = 'english'
  //  this.$i18n.locale = 'en'
  // }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/assets/scss/index.scss';
</style>

点击切换语言 这样就完成了一个简单的国际化。language-en.js language-zh.js这两个文件是要翻译的内容,通过$t(' ') 完成调用。

Ps:亲测可用,只为备忘,仅供参考

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 #Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 #Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 #Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 #Javascript
基于js实现判断浏览器类型代码实例
Jul 17 #Javascript
Vue实现背景更换颜色操作
Jul 17 #Javascript
You might like
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python正则分析nginx的访问日志
2017/01/17 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
python的链表基础知识点
2020/09/13 Python
static函数与普通函数有什么区别
2015/12/25 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
医药销售求职信范文
2014/02/01 职场文书
购房意向书范本
2014/04/01 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
什么是SOLID
2022/03/24 Javascript