vue使用vue-i18n实现国际化的实现代码


Posted in Javascript onApril 08, 2018

需求

公司项目需要国际化,点击按钮切换中文/英文

1、安装

npm install vue-i18n --save

2、注入 vue 实例中,项目中实现调用 api 和 模板语法

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) ;

const i18n = new VueI18n({
  locale: 'zh-CN',  // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
  messages: {
   'zh-CN': require('./common/lang/zh'),  // 中文语言包
   'en-US': require('./common/lang/en')  // 英文语言包
  }
})

new Vue({
 el: '#app',
 i18n, // 最后
 router,
 template: '<App/>',
 components: { App }
})

3、对应语言包

zh.js中文语言包:

export const lang = {
 homeOverview:'首页概览',
 firmOverview:'公司概述',
 firmReports:'财务报表',
 firmAppendix:'更多附录',
 firmIndex:'主要财务指标',
 firmAnalysis:'对比分析',
 firmNews:'新闻事件档案',
 firmOther:'其他功能',
}

en.js 英文语言包:

export const lang = {
 homeOverview:'Home overview',
 firmOverview:'firmOverview',
 firmReports:'firmReports',
 firmAppendix:'firmAppendix',
 firmIndex:'firmIndex',
 firmAnalysis:'firmAnalysis',
 firmNews:'firmNews',
 firmOther:'firmOther'
}

4、按钮控制切换语言

this.$i18n.locale,当你赋值为‘zh-CN'时,导航栏就变成中文;当赋值为 ‘en-US'时,就变成英文:

<div class="top_btn" @click="changeLangEvent">中文</div>
changeLangEvent() {
  console.log('changeLangEvent');
  this.$confirm('确定切换语言吗?', '提示', {
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   if ( this.$i18n.locale === 'zh-CN' ) {
    this.$i18n.locale = 'en-US';//关键语句
    console.log('en-US')
   }else {
    this.$i18n.locale = 'zh-CN';//关键语句
    console.log('zh-CN')
   }
  }).catch(() => {
   console.log('catch');
   this.$message({
    type: 'info',
   });
  });
 }

5、模板渲染

静态渲染:

<span v-text="$t('lang .homeOverview')"></span>
<span>{{$t('lang .homeOverview')}}</span>

如果是element-ui 的,在要翻译的前面加上冒号

比如:label="用户姓名" 就改成 :label="$t('order.userName')"

动态渲染:

<span class="el-dropdown-link">{{navCompany}}</span>
 computed:{
   navCompany:function(){
    if(this.nav_company){
     let str = 'lang'+this.nav_company;
     return this.$t(str);
    }
   }
},
    
 <el-submenu
      v-for="(value, title1, one) in navList"
      :key="one+1"
      :index="(one+1).toString()">

   <template slot="title">
    <router-link :to="linkList[title1]">{{ getTitle(title1) }}</router-link>
   </template>
       
</el-submenu>

methods: {
  getTitle(title){
    let str = 'lang.'+title;
    return this.$t(str);
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 #Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 #Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 #Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 #Javascript
Js面试算法详解
Apr 08 #Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 #Javascript
详解vue表单——小白速看
Apr 08 #Javascript
You might like
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
python psutil监控进程实例
2019/12/17 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
采购主管工作职责
2013/12/12 职场文书
有创意的广告词
2014/03/18 职场文书
黄金搭档广告词
2014/03/21 职场文书
培训讲师岗位职责
2014/04/13 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
园林技术专业求职信
2014/07/28 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
春季运动会加油词
2015/07/18 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL