Vue国际化(vue-i18n)

一、安装

三种方式:

1、script引入

<script src="https://unpkg.com/vue/dist/vue.js"></script> 

 <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

2、npm安装

 npm install vue-i18n

3、yarn安装

 yarn add vue-i18n

二、配置

main.js文件配置

1.引入i18n国际化插件

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

2.注册i18n实例并引入语言文件,文件格式等下解析

const i18n = new VueI18n({ 

 locale: 'zh', // 定义默认语言为中文 

 messages: {   

    'zh': require('@/assets/languages/zh.json'),   

    'en': require('@/assets/languages/en.json') 

  }

});

3.将i18n注入到vue实例中

new Vue({

   el: '#app',

   router,

   i18n,

   components: { App},

   template: '<App/>'

 }); 

4.文件格式(json文件)

首先来看zh.json文件,如下:


对应的en.json格式与zh.json一样,只需要把中文改为英文即可,如下:


三、模板渲染

//html文件需要加{{}}

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

//js文件

   $t('common.home')

点击进行语言切换,如下:

PS:本文只是用于个人笔记,欢迎纠错,不喜勿喷,谢谢!

(注: github地址:Avery_G , Gladysdrea

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:“90后,你的中年危机已经杀到”。这令我很受触动。...
    王钰峰阅读 9,922评论 1 22
  • 上一篇文章http://www.jianshu.com/p/674e75b41642介绍了项目里文件夹的作用分类和...
    威少_吴阅读 5,030评论 0 4
  • demo 场景需求分析 需求很简单,左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮,点击弹出提示框,确认切换语...
    _双眸阅读 6,411评论 1 1
  • 我种下一个梦, 最后却开出了回忆的果子! 于是,我步履蹒跚; 于是,我心心念念; 于是,我在不属于自己的梦里等候着...
    流云蓝心阅读 4,170评论 12 18
  • 有时候,当我们的mac硬盘空间不够用的时候,我们查看“用户”文件夹,发现这个文件夹占用了很大的存储空间,可是当我们...
    無春不欢阅读 26,210评论 2 2