1.安装vue-i18n

npm install vue-i18n --save

2.项目配置vue-i18n

语言文件配置：
en.js：

const en = { 
 menu : { 
   home:"home",
   msg:"this is an about page"
 }, 
 content:{ 
   main:"this is content"
 } 
}

export default en;

zh.js：

const zh= { 
 menu : { 
   home:"首页",
   msg:"这是一个关于页面"
 }, 
 content:{ 
   main:"这里是内容"
 } 
}
export default zh;

index.js配置

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
// 引入各个语言配置文件
import zh from './lang/zh';
import en from './lang/en';
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
    // 设置默认语言
    locale: localStorage.getItem('locale') || 'zh',  // 语言标识
    // 添加多语言（每一个语言标示对应一个语言文件）
    messages: {
        zh,
        en,
    }
})
// 暴露i18n
export default i18n;

最后在外层main.js引入i18n，并挂载至vue实例:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios"
/**
 * 引入i18n国际化
 */
import i18n from './i18n/'

Vue.prototype.$axios = axios;

Vue.config.productionTip = false

new Vue({
  i18n,     //挂载
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.项目中使用

通过$t()方法引用文案：

<div class="title">{{$t('menu.home')}}</div>

修改语言方法：

this.$i18n.locale = "en";

案例：

<template>
	<div>
		<div class="tab">
			<span @click="tab('zh')">中文</span>|
			<span @click="tab('en')">英文</span>
		</div>
		<!-- 通过$t()方法引用文案： -->
		<div class="title">{{$t('menu.home')}}</div>
	</div>
</template>
<script>
export default {
  name: 'lang',
    data () {
	    return {
	    }
    },
  	methods:{
		tab(type){
			localStorage.setItem('locale',type)        // 语言选择记录
			this.$i18n.locale = type;
		}
 	}
}
</script>