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(() => {});
			},