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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
JavaScript触发器详解
Mar 10 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 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获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
客户端静态页面玩分页
2006/06/26 Javascript
JavaScript中“+=”的应用
2007/02/02 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
jquery实现拖动效果
2016/08/10 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
进一步探究Python的装饰器的运用
2015/05/05 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
中间件分为哪几类
2016/09/18 面试题
军训的自我鉴定
2013/12/10 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
大学生村官典型材料
2014/01/12 职场文书
后勤主管岗位职责
2014/03/01 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
人力资源作业细则
2014/03/03 职场文书
房产公证委托书范本
2014/09/20 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
勇敢的心观后感
2015/06/09 职场文书