1.安裝vue-i18n
npm i --save vue-i18n
2.項目配置vue-i18n
在src文件夾下新建文件夾i18n
在i18n 文件夾下新建文件 index.js和文件夾lang
在lang文件夾下新建zh.js 和en.js
3.現(xiàn)在說一下各文件的配置和寫法
（1）index.js配置

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
// 引入各個語言配置文件
import zh from './lang/zn';
import en from './lang/en';
// 創(chuàng)建vue-i18n實例i18n
const i18n = new VueI18n({
    // 設(shè)置默認(rèn)語言
    locale: localStorage.getItem('locale') || 'zh',  // 語言標(biāo)識
    // 添加多語言（每一個語言標(biāo)示對應(yīng)一個語言文件）
    messages: {
        zh,
        en,
    }
})
// 暴露i18n
export default i18n;

（2）en.js

import enLocale from 'element-ui/lib/locale/lang/en' //引入element-ui英文內(nèi)容
const en = { 
    ...enLocale, //控制 element ui 語言
    topbar : { 
      login:"Login",
      register:"register",
      welcome:'Welcome',
      signOut:'Sign Out',
      myOrder:'MyOrder'
    }, 
}

（3）zh.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'  // 引入element-ui中文內(nèi)容
const zh= { 
    ...zhLocale, //控制 element ui 語言
    topbar : { 
      login:"登錄",
      register:"注冊",
      welcome:'歡迎',
      signOut:'退出',
      myOrder:'我的訂單'
    },
}

（4）在mian.js中引入i18n和element-ui, 并掛載到vue實例

import Vue from 'vue'
import Router from 'vue-router'
import App from './App.vue'
/**
 * 引入i18n國際化
 */
import i18n from './i18n/index'
// 引入配置element-ui
import ElementUI from 'element-ui'
import ElementLocale from 'element-ui/lib/locale'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
ElementLocale.i18n((key, value) => i18n.t(key, value)) // i18n控制ui插件語言
new Vue({
  i18n,     //掛載  非常重要
  router,
  store,
  render: h => h(App),
}).$mount('#app')

4.項目中使用
（1）通過$t()方法引入文案

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

（2）修改語言的方法

this.$i18n.locale = 'en';

（3）案例

<template>
    <div>
        <div class="tab">
            <span @click="tab('zh')">中文</span>|
            <span @click="tab('en')">英文</span>
        </div>
        <!-- 通過$t()方法引用文案： -->
        <div class="title">{{$t('topbar.login')}}</div>
    </div>
</template>
<script>
export default {
  name: 'lang',
    data () {
        return {
        }
    },
    methods:{
        tab(type){
            localStorage.setItem('locale',type)        // 語言選擇記錄
            this.$i18n.locale = type;
        }
    }
}
</script>