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的几种方法
Oct 23 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 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/05 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
js模块加载方式浅析
2017/08/12 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
简单的Python调度器Schedule详解
2019/08/30 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
英国电子专家:maplin
2019/09/04 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
个人股份合作协议书
2014/10/24 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2014年物流工作总结
2014/11/25 职场文书
关于 Python json中load和loads区别
2021/11/07 Python
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js