Vue国际化（vue-i18n）

参考地址
https://www.jianshu.com/p/df2550c6f1be
一、安装
三种方式：

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文件，如下：

const messageEn = {
   "common.edit": "编辑",
    "common.add": "添加",
    "common.config": "配置",
    }
    
export default  messageEn

三、模板渲染

html文件需要加{{}}

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

js文件

   $t('common.home')

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

<template>
    <div>
        <button @click="Ch">中文</button>
        <button @click="En">英文</button>
        <p>{{$t('commom.home')}</p>
    </div>
</template>
<script>
export default {
    methods: {
        Ch(){
            this.$i18n.locale="zh"
        },
        En(){
            this.$i18n.locale="en"
        }
    },
}