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 相关文章推荐
jquery获得option的值和对option进行操作
Dec 13 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
Angular2安装angular-cli
May 21 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 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 版本]
2007/03/20 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
javascript基本语法
2016/05/31 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python 实现绘制整齐的表格
2019/11/18 Python
python字符串反转的四种方法详解
2019/12/02 Python
Python调用Windows命令打印文件
2020/02/07 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
企业晚会策划方案
2014/05/29 职场文书
消防工作实施方案
2014/06/09 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis