因项目需要,需要使用多语言,特此记录使用方法。

第一步:安装vue-i18n

npm install vue-i18n

第二步:在生成的i18n文件夹中的index.js里引入vue-i18n

第三步:依旧在i18n文件夹中的indx.js文件里实例化,并且设置默认语言

第四步:挂在到vue的实例中

在这里需要注意在挂载之前需要引入一下

第五步:准备一些多语言资源。

我的做法是在生成的i18n文件夹里新建一个lang文件夹专门来存放多语言json文件。如下图:

之后我们就可以方便的实时更改语言文案啦。如下图:

第六步:动态切换语言

因为我本次项目使用的UI框架是iview。页面代码如下:

vue-i18n 提供了一个全局配置参数叫 “locale”,通过改变 locale 的值可以实现不同语言的切换。

在页面中只需要在切换时,修改this.$i18n.locale的值即可。

第七步:如何在HTML中使用

{{$t('header.home')}}

 
第八步:如何在js中使用

{{this.$t('header.home')}}

至此已基本完成vue中的多语言操作。

vue项目中如何使用多语言(vue-i18n)的更多相关文章

  1. vue项目中,main.js,App.vue,index.html如何调用

    1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...

  2. Vue 项目中 外部js 如何获取 vue 实例

    1.将main.js 中的 Vue 实例暴露出去 2.在外部js中导入main.js (    import vm from '../main' );

  3. vue项目中使用bpmn-流程图xml文件中节点属性转json结构

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...

  4. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  5. vue项目中使用bpmn-流程图预览篇

    前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...

  6. vue项目中使用bpmn-节点篇

    前情提要 根据之前的操作,我们可以创建.导入.导出流程图,并对其进预览.通过此篇可以学到: 为节点添加点击.鼠标悬浮等事件 获取流程图内所有指定类型的节点 通过外部更新节点名字 获取节点实例的两种方法 ...

  7. vue项目中使用bpmn-为节点添加颜色

    内容概述 本系列 “vue项目中使用bpmn-xxxx” 分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意 ...

  8. vue项目中使用bpmn-基础篇

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项 ...

  9. vue项目中使用bpmn-番外篇(留言问题总结)

    前情提要 “vue项目中使用bpmn-xxxx”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创 ...

随机推荐

  1. 锋利的jQuery初学(4)

    css选择器与jQuery选择器 css选择器 符号 说明 用法 #id 选择器 #id{} .class 类选择器 .class{} Element 标签选择器 p{} , 并集选择器 div,p{ ...

  2. 设计模式—模板方法(template method)

    一.定义 百度百科给的定义:定义一个操作中的算法骨架(稳定),而将一些步骤延迟到子类中(变化).Template Method使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 如何做到 ...

  3. Scala基础

    1.seq[String] 用[]表示参数类型,java使用<>表示参数,因为Scala 允许以<命名方法和变量名,java不允许 2.支持range的类型:Char .Int . ...

  4. [双系统linux] ----安装完成后无法打开wifi

    在安装了linux 双系统以后发现无法打开wifi和蓝牙. rfkill list all 0:ideapad_wlan: Wireless LANSoft blocked: noHard block ...

  5. Eclipse 中快捷键

    Ctrl + Shift + T   查看原生类定义

  6. 1-Two Sum @LeetCode

    1-Two Sum 题目 思路 题目中得到的信息有: 都是整数,并且可正可负,也可一个值包含多个: 只有一个正确的结果. 方法一: 最直接的思路就是两重循环遍历,时间复杂度是O(n^2),这样肯定不行 ...

  7. Netty 之 Netty生产级的心跳和重连机制

    https://blog.csdn.net/z69183787/article/details/52625095 最近工作比较忙,但闲暇之余还是看了阿里的冯家春(fengjiachun)的github ...

  8. select大表报错

    MySQL查询大表报错 MySQL执行select操作时候,如果执行查询的表的数据量比较大,就会报错error code 2013.或者报错已杀死,并直接退出MySQL客户端.如下所示: mysql& ...

  9. 阿里巴巴语音识别模型 DFSMN 的使用指南

    阿里巴巴 2018 年开源的语音识别模型 DFSMN,将全球语音识别准确率纪录提高至 96.04%.DFSMN 模型,是阿里巴巴的高效工业级实现,相对于传统的 LSTM.BLSTM 等声学模型,该模型 ...

  10. Unity外包团队:U3D与UE我选哪个好?请别再问这种问题了!

    原本预先决定的两家VR游戏公司采访,思熊和星为棋,并没有发现什么共性之初.结果在采访之后却意外发现,两家的经历有着非常相似的地方.他们都是来自于开发游戏所用的引擎的原开发商,比如思熊的主力来自Epic ...