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 相关文章推荐
node.js开机自启动脚本文件
Dec 24 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
js实现简单的验证码
2015/12/25 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
python实现图书馆研习室自动预约功能
2018/04/27 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python上下文管理器全实例详解
2019/11/12 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
几个数据库方面的面试题
2016/07/01 面试题
生产副总岗位职责
2013/11/28 职场文书
饮料业务员岗位职责
2013/12/15 职场文书
销售总监岗位职责
2014/01/04 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
结婚保证书范文
2014/04/29 职场文书
青奥会口号
2014/06/12 职场文书
信访工作个人总结
2015/03/03 职场文书
自我推荐信怎么写
2015/03/24 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL