1.安装i18n插件

npm install vue-i18n --save-dev

注意：
vue2环境下安装i18n插件时 有可能会报错（我的这个项目比较老，vue2.5.x版本的），报错信息如下：

原因是i18n的版本太高了，可以安装vue2适合的版本
我们可以在终端中查看 vue-i18n 所有版本：选择合适的版本下载即可

npm view vue-i18n versions --json

2.引入

新建如下文件夹和文件

src/components/lang/zh.js

//zhLocale是为了使element-ui组件也进行中英文切换
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
export default {
  "lang": '中文',
  user: {
    login: '登录',
    register: '注册',
    loginUsername: '请输入邮箱/手机号',
  },
  ...zhLocale
}

src/components/lang/en.js

//enLocale 是为了使element-ui组件也进行中英文切换
import enLocale from 'element-ui/lib/locale/lang/en'
export default {
  "lang": 'English',
  user: {
    login: 'login',
    register: 'register',
    loginUsername: 'loginUsername',
  },
  ...enLocale

}

src/components/lang/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import zh from './zh'
import en from './en'
Vue.use(VueI18n)
const messages = {
  en: {
    ...en,
  },
  zh: {
    ...zh,
  }
};
const i18n = new VueI18n({
  locale: localStorage.lang || 'zh',
  messages,
});
locale.i18n((key, value) => i18n.t(key, value))
export default i18n;

在main.js中引入

import i18n from '@/components/lang/index'
new Vue({
  el: '#app',
  router,
  i18n,
  //第一次访问的时候并没有实现自动切换语言的功能，但是在localStorage中看到lang已经被赋值，只有当页面再次刷新的时候才生效了。解决这个问题的办法就是将i18n.locale属性配置放入Vue中来，这样加载系统的时候就会自动去刷新i18n.locale属性了
  created() {
    i18n.locale = localStorage.getItem('lang')
  },
  components: {
    App
  },
  template: '<App/>'
})

request.js请求拦截中添加请求头配置

request.interceptors.request.use(
  config => {
    // 在发送请求之前做什么, 判断token是否存在，参数ACCESS_TOKEN 
    if (sessionStorage.getItem("token")) {
      config.headers.common['Authorization'] = sessionStorage.getItem("token");
    }
    // 多语言配置请求头
    let lan = localStorage.getItem('lang') || 'zh';
    if (lan == 'en') {
      config.headers['Accept-Language'] = 'en;q=0.8' // 优先支持英文，没有则支持中文
    } else {
      config.headers['Accept-Language'] = 'zh-CN,zh;q=0.9' // 优先支持中文，没有则支持英文
    }
    return config;
  }, err => {
    // do something with request error
    console.log(error)
    router.push('/new')
    return Promise.reject(err);
  }
);

3.使用

在Header组件中添加切换语言的按钮

 <el-dropdown class="lang" trigger="hover" @command="langChange">
      <el-link suffix-icon="co-icon-arrow-down" :underline="false">语言</el-link>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="zh">中文</el-dropdown-item>
        <el-dropdown-item command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

 // 中英文切换
    langChange(command) {
      this.$i18n.locale = command;
      localStorage.setItem("lang", command);
      if (command == "en") {
        this.language = "English";
      } else if (command == "zh") {
        this.language = "中文";
      }
      window.location.reload();//因涉及到接口数据，所以需要强刷一下页面
    }

4.数据渲染

dom中使用

<span>{{$t('user.name')}}</span>

js中使用

handleView(index,row){
	this.title = this.$t('user.title')
}