1: npm install --save vue-i18n@8.0.0  （版本不要高了，不然报错）

2：创建相关文件

zh.js 

import zhLocale  from 'element-ui/lib/locale/lang/zh-CN'
const zh = {/* 头部 */'header' : {'title' : '二手车','tab1' : '主页','tab2' : '类型','tab3' : '品牌专区','tab4' : '我要卖车','tab5' : '收藏','tab6' : '我要验车','serach' : '请输入搜索内容','logout' : '退出登录','info_user' : '个人信息','my_release' : '我的发布','validate' : '验车记录','privacy' : '隐私说明','login' : '立即登录'},/* 弹窗提示 */'pop':{'tips':'提示','confirm':"确定",'cancel' :'取消','logoutext':'确定退出登录吗？','copy' : '复制邮箱成功',"pop1":"注册成功","pop2":"修改成功","pop3":"请输入正确的邮箱！","pop4":"验证码获取成功！","pop5":"正在获取验证码！",},...zhLocale
}
export default zh

en.js

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {/* 头部 */'header' : {'title' : 'Used car','tab1' : 'Home','tab2' : 'Type','tab3' : 'Brand','tab4' : 'Sell','tab5' : 'Collect','tab6' : 'Inspect','serach' : 'Please enter your search','logout' : 'Log out','info_user' : 'Personal details','my_release' : 'My release','validate' : 'Vehicle  record','privacy' : 'Privacy statement','login' : 'Sign in now'},/* 弹窗提示 */'pop':{'tips':'tips','confirm':"confirm",'cancel' :'cancel','logoutext':'Are you sure you want to log out?','copy' : 'Succeeded in copying the mailbox',"pop1":"Registered successfully","pop2":"Modified successfully","pop3":"Please enter the correct email address！","pop4":"The verification code is successfully obtained！","pop5":"Getting the verification code！",},...enLocale
}
export default en

3：main.js文件配置

//i18n插件
import VueI18n from 'vue-i18n'
// element-ui多语言文件
import locale from 'element-ui/lib/locale';// 本地多语言文件
import zh from "./language/zh";
import en from "./language/en";Vue.use(VueI18n);const i18n = new VueI18n({
/* 获取当前语言环境 ，自己可在全局配置和修改好存到sessionStorage中*/locale: sessionStorage.getItem('locale') || 'en',messages: {zh: zh,en: en}
});locale.i18n((key, value) => i18n.t(key, value))new Vue({el: '#app',router,i18n,store,render: h => h(App)
})

4：页面使用（以导航栏为例）

左边路由是循环的，所以data中的数据需要特殊设计

name统一为语言文件中对呀的key

<div class="menu"><div :class="['item',item.path==currentActive?'active':'']" v-for="(item,index) in menu" :key="index" @click="navTo(item.path)"><!-- 动态拼接key --><span>{{$t("header."+item.name)}}</span></div>
</div>

input 输入款的占位符使用

<el-input :placeholder="$t('header.serach')"> </el-input>

普通状态使用  

<span>{{$t("header.title")}}</span>

在js中使用

使用前

使用后

async handleLogout() {this.$confirm(this.$t("pop.logoutext"), this.$t("pop.tips"), {confirmButtonText: this.$t("pop.confirm"),cancelButtonText: this.$t("pop.cancel"),type: 'warning'}).then(() => {this.$store.dispatch('FedLogOut').then(() => {location.href = '/index';})}).catch(() => {});},