npm install vue-i18n
或者 yarn add vue-i18n

1.分别创建中英文语言包

// locales/zh.json 
{
   login: '登录',
   Username: '用户名',
   Password: '密码',
   Captcha: '验证码',
   Language: '语言',
   zh: '中文',
   en: '英文'
}
// locales/en.json 
{
  login: 'Login',
  Username: 'Username',
  Password: 'Password',
  Captcha: 'Captcha',
  Language: 'Language',
  zh: 'Chinese',
  en: 'English'
}

2.通过插件方式导入

// An highlighted block
var foo = 'bar';
```// src/plugins/i18n/i18n.js
​
import Vue from 'vue';
import VueI18n from 'vue-i18n';//引入vue-i18n
Vue.use(VueI18n);
​
const i18n = new VueI18n({
 locale: 'zh',// 默认语言标识
 fallbackLocale: 'en',
 messages: {
   en: require('@/locales/en.json'),
   zh: require('@/locales/zh-cn.json'),
},
});
const i18nPlugin = {};
i18nPlugin.install = function (Vue, options) {
 // 1. 注入组件
 Vue.mixin({
   methods: {
     changeLanguage(language = 'zh') {
       if (language === 'en') {
         language = this._i18n.locale = 'zh';// 中文语言包地址
      } else {
         language = this._i18n.locale = 'en';// 中文语言包地址
      }
    },
  },
});
 // 2. 添加实例方法
 Vue.prototype._i18n = i18n;
};
​
export { i18n, i18nPlugin };

// main.js
​
import { i18n, i18nPlugin } from '@/plugins/i18n/i18n';//导入插件
Vue.use(i18nPlugin);
​
const app = new Vue({
 i18n,
 ...App,
});
app.$mount();

3.通过vue-i18n的模板语法进行数据渲染

//vue组件模板的使用
<div>{{$t('message.zh')}}</div>
​
//vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"></input>
​
//vue组件data中赋值的使用
data:{
  msg:this.$t('message.zh');
}

4.切换语言

	this.changeLanguage('en') // 切换为英文语言
	this.changeLanguage('zh') // 切换为中文语言