vue-i18n是一款针对Vue.js 的国际化插件,具体应用步骤如下:

一、安装插件

  1. npm install vue-i18n --save

二、在main.js中引入插件

  1. import VueI18n from 'vue-i18n'
  2.  
  3. Vue.use(VueI18n)

三、创建i18n实例

  1. const i18n = new VueI18n({ 
  2. // 默认语言
  3.  locale: 'zh',
  4. // 引入对应的语言包文件
  5.  messages: {   
  6.     'zh': require('@/assets/languages/zh.json'),   
  7.     'en': require('@/assets/languages/en.json') 
  8.   }
  9. });

  注:为了在页面刷新后仍然能够保持当前的语言环境,一般会将语言参数缓存到localStorage中,locale属性的初始赋值方式会变为 locale: localStorage.getItem(‘lang’) || ‘zh’

四、在assets目录下新建对应的语言json文件

  1. // zh.json
  2. {
  3. "message": {
  4. "greeting": "你好"
  5. }
  6. }
  7.  
  8. // en.json
  9. {
  10. "message": {
  11. "greeting": "hello"
  12. }
  13. }

  注:json文件中的key值必须使用双引号。

五、使用

  1. // 在template中的使用方式:
  2. <span>{{$t('message.greeting')}}</span>
  3.  
  4. // 在script脚本中的使用方式:
  5. this.$t('message.greeting')

六、语言切换

  语言切换只要改变i18n实例中locale的值即可:

  1. this.$i18n.locale = en’;
  2. localStorage.setItem(‘lang’, en’)

  上述呢就是vue国际化的基础用法~

应用九:Vue之国际化(vue-i18n)的更多相关文章

  1. vue+element-ui国际化(i18n)

    1. 下载element-ui和vue-i18n: npm i element-ui --save   npm i vue-i18n –save 2.  创建一个  i18n 文件夹, 在main.j ...

  2. vue国际化问题i18n为null

    1.vue的国际化关于使用请看这位大佬的文章https://segmentfault.com/a/1190000015008808 2.this指向问题https://segmentfault.com ...

  3. 在Vue中加入国际化(i18n)中英文功能

    1.npm安装方法 npm install vue-i18n --save 2.在src资源文件下创建文件夹i18n,i18n下面创建index.js文件,引入VueI18n和导入语言包(按开发需求可 ...

  4. vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用

    vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...

  5. vue项目国际化实现 vue-i18n使用详细教程

    1.安装vue-i18n: npm i vue-i18n -S 当然你也可以这样: <script src="https://unpkg.com/vue/dist/vue.js&quo ...

  6. vue + element-ui 国际化实现

    1. 安装组件和插件 cnpm i element-ui -S // 安装elementcnpm i vue-i18n -S //安装i18n 2.将国际化资源放在assets目录下 3.在src下新 ...

  7. vue使用国际化

    转载请注明作者与出处 一:安装vue-i18n npm install vue-i18n --save 二:定义不同语言的json语言包 一般把它放到npm工程中的src目录下,因为这个目录是要进行编 ...

  8. 第五十九篇:关于Vue

    好家伙,前面关于vue的学习太散太乱了,我决定重新整理一下知识框架,当作复习了,并且在其中补充一些概念 先提出一个问题:怎么把数据弄到页面上? 若不借助vue,把数据填充到页面上, 我们需要操作dom ...

  9. Java国际化(i18n)

    Java国际化(i18n) 最近在做一个网站国际化的功能.用Java做开发,使用spring+velocity. Java提供了对i18n的支持,spring对其做了集成,可以很方便的配置.主要思想就 ...

  10. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

随机推荐

  1. Spark day03

    补充算子 transformations mapPartitionWithIndex 类似于mapPartitions,除此之外还会携带分区的索引值. repartition 增加或减少分区.会产生s ...

  2. API管理的五大规则

    http://www.csdn.net/article/2012-12-18/2812929-5-Rules-For-API-Management 1. 设计 开发人员使用API访问各种不同的类,并且 ...

  3. Oracle中事物处理--事物隔离级别

    n  事物隔离级别 概念:隔离级别定义了事物与事物之间的隔离程度. ANSI/ISO SQL92标准定义了一些数据库操作的隔离级别(这是国际标准化组织定义的一个标准而已,不同的数据库在实现时有所不同) ...

  4. @spoj - ADAMOLD@ Ada and Mold

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个长度为 N 的序列 A,将其划分成 K + 1 段,划分 ...

  5. Java练习 SDUT-2787_加密术

    加密术 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 加密技术是一种常用的安全保密手段,利用加密技术可以把重要的数据变 ...

  6. Docker镜像部分详解

    拉取镜像: docker pull [选项] [Docker Registry 地址[:端口号]/]仓库名[:标签] Docker 镜像仓库地址:地址的格式一般是 [:端口号].默认地址是 Docke ...

  7. [React Native]高度自增长的TextInput组件

    之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这 ...

  8. W600 一块新的 KiCad PCB

    W600 一块新的 KiCad PCB 打算做以下功能. Type-C USB. 使用 KiCad 画板. 加入串口芯片,方便调试. 使用 PCB 天线.

  9. mysql查询包含逗号的数据,并逗号拆分为多行展现

    在做系统开发的时候,有可能是由于之前的遗留问题,导致在数据入库的时候,将多个数据以逗号分隔的实行,存储在一条数据中,例如: ID VALUE 1 yang,zheng,song 2 zhao,qian ...

  10. 初识 Knative: 跨平台的 Serverless 编排框架

    Knative 是什么 Knative 是 Google 在 2018 的 Google Cloud Next 大会上发布的一款基于 Kubernetes 的 Serverless 框架.Knativ ...