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 cookie操作代码
Mar 14 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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程序
2006/10/09 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
php二维码生成
2015/10/19 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
node.js中的console用法总结
2014/12/15 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python将回车作为输入内容的实例
2018/06/23 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Ruby如何进行文件操作
2014/07/17 面试题
通信生自我鉴定
2014/01/18 职场文书
索桥的故事教学反思
2014/02/06 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
导游带团欢迎词
2015/09/30 职场文书