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')

点击进行语言切换，如下：