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

第一步:安装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. MATLAB 进行五种边缘检测

    自定义函数: function []=edge_detect(image_name) a=imread(image_name); I=rgb2gray(a); BW1=edge(I,'Roberts' ...

  2. switch_case注意事项

    1.switch 语句有至少一个 case 代码块和一个可选的 default 代码块. 这里的 switch 从第一个 case 分支比较 a 的值,值为 3 匹配失败.然后比较 4.匹配,所以从  ...

  3. Centos中安装gitlab

    安装依赖: sudo yum install curl openssh-server openssh-clients postfix cronie sudo service postfix start ...

  4. 不应该使用String.valueOf的场景

    今天在接口中接收参数转换String时遇到一个巨大的坑,也是自己疏忽大意所致---- 事情是这样的,项目中接口的公共入参对象为Map<String,Object>,而sql中需要的参数为S ...

  5. Jump跳板机的搭建和部署

    Jump跳板机简绍   概括 Jumpserver 是一款由python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能.基于ssh协议来管理,客户端无需安装agent. Jumpserver ...

  6. js中的call与apply随笔

    关于javascript中的call方法.总结网上的观点: 1: 继承. 2: 修改函数运行时的this指针. 可能说起来还是比较抽象,下面具体例子说一下: x.call(y) (1)y.m = x  ...

  7. ELK 起航

    ELK与我 我在2017年8月份第一次听说ELK并搭建了一次,当时看到KIBANA页面超级炫酷非常激动.现在已经过去了四个月了,现在的情况不像刚开始哪有无知了.现在是要应用到实际的项目中.首先说一下整 ...

  8. web爬虫，requests请求

    requests请求,就是用yhthon的requests模块模拟浏览器请求,返回html源码 模拟浏览器请求有两种,一种是不需要用户登录或者验证的请求,一种是需要用户登录或者验证的请求 一.不需要用 ...

  9. django 分页组件

      一.仿django分页功能自己实现 urls.py 1 2 3 4 5 6 7 8 9 from django.conf.urls import url from django.contrib i ...

  10. Java 关键字详解（持续更新中）

    abstract:     表明类或者成员方法具有抽象熟悉.       修饰类,抽象类:         抽象类不能被实例化:         抽象类中可以有属性.方法.构造,都是用来给子类继承的: ...