前言 ：vue-i18n是一个针对于vue的国际化插件，使用非常简单，在网上查了很多资料，都说的不是特别清楚，在这里结合我自己使用情况跟大家细细道来。

实现方式：
1.下载安装包

国内使用

cnpm install vue-i18n

国外使用

npm install vue-i18n

2.配置
在main.js文件中加入如下配置

// 引入插件和语言包
import VueI18n from 'vue-i18n'
import zh from '@/i18n/langs/zh'
import en from '@/i18n/langs/en'
Vue.use(VueI18n)

//实例化vue-i18n
const i18n = new VueI18n({

  // 从本地存储中取，如果没有默认为中文，
  // 这样可以解决切换语言后，没记住选择的语言，刷新页面后还是默认的语言
  locale: localStorage.getItem('lang') || 'zh',
  
  messages: {
    'zh': zh, // 中文语言包
    'en': en // 英文语言包
  }
})

// 将i18n实例挂载到vue上
new Vue({
  el: '#app',
  i18n,
  router,
  store,
  template: '<App/>',
  components: { App }
})

3. 创建中、英文包文件
   新建一个common文件夹，在这个文件夹下面创建两个文件，一个为zh.js代表中文，en.js代表英文，具体内容格式如下：

//zh.js
export const lang = {
    Login : {
      Login : "登陆",
      UserName : "用户名",
      Password : "密码",
      MessageTips : "用户名或密码错误"
    },
    ButtonBox : {
       Set : "设置",
       Get : "读取",
       Send : "发送"
    },
    MessageBox : {
        Confirm : "确定",
        Cancel : "取消",
        Tips : "提示",
        Logout : "确定要离开吗?"
    }
}

//en.js
export const lang = {
   Login : {
      Login : "Login",
      UserName : "username",
      Password : "password",
      MessageTips : "username or password error"
   },
    ButtonBox : {
       Set : "Set",
       Get : "Get",
       Send : "Send"
    },
    MessageBox :{
      Confirm : "Confirm",
      Cancel : "Cancel",
      Tips : "Tips",
      Logout : "Are you sure want to leave?"
    }
}

4.在组件中使用
我们先看vue-i18n的模板语法

//第一种
<el-button type="primary">{{ $t('lang.ButtonBox.Set') }}</el-button>

//第二种
<el-select v-model="outputId" :placeholder="$t('lang.GpioState.PleaseSelect')">

//第三种
export default{
	methods：{
		beforeRemove:function() {
            return this.$confirm(this.$t('lang.SystemUpgrade.ConfirmRemove'));
          }
	}
}

5 如何切换中英文

关于这点，vue-i18n给我们提供了一个全局变量locale，通过他我们可以查看当前使用的语言，也可以通过他改变当前使用的语言；

具体用法：

// 查看当前使用的语言
console.log(this.$i18n.locale)

// 改变当前使用的语言
this.$i18n.locale = 'en'  // 将当前使用的语言切换到英文

一般在项目中，我们会使用如下方式切换语言

// 切换语言按钮
<v-list-tile  @click="onChangeLang">
  <v-list-tile-title>中文 / EN</v-list-tile-title>
</v-list-tile>
<v-list-tile  @click="onLogOutClick">
  <v-list-tile-title >{{$t('confirm.logout')}}</v-list-tile-title>
</v-list-tile>


// 切换方法onChangeLang的处理, 这里的弹出框是element-ui的组件
onChangeLang() {
  this.$confirm(this.$t('changeLang.content'), this.$t('changeLang.tip'), {
    confirmButtonText: this.$t('changeLang.ok'),
    cancelButtonText: this.$t('confirm.cancel'),
    type: 'warning'
  })
    .then(() => {
      let lang = this.$i18n.locale
      if (lang === 'zh') {
        this.$i18n.locale = 'en'
        // 对应main.js配置文件中的localStorage的get方法
        localStorage.setItem('lang', this.lang)
      } else {
        this.$i18n.locale = 'zh'
        localStorage.setItem('lang', this.lang)
      }
    })
    .catch(() => {})
}

6 可能会遇到的问题以及解决办法
1.记不住切换后的语言就是我们切换语言后，刷新又是默认语言，这点我们在上面已经用本地存储localStorage解决了；

2 将this.$t() 写到了data属性里，切换语言不起作用data是一次性生产的，你这么写只能是在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。官方的解决办法是，建议我们将表达式写到computed属性里，不要写到data里。如：gpsItems数据项，当gpsItems数据项写在data里面时，切换语言时会失效，只能写在computed属性里面或者写在watch属性里面。

<div class="set_gps">
     <p>
         	<label class="font_regular_14x">GPS：</label>
         	<span>
                 <el-select v-model="gps">
                     <el-option
                       v-for="item in gpsItems"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
            </span>
     </p>
 </div>


export default{
	computed:{
        gpsItems(){
            return [
                 {
                   value : '1' ,
                   label : this.$t('lang.ParamsConfig.ExternalGps')
                 },
                 {
                   value : '2' ,
                   label : 'U-blox'
                 }
             ];
         }
       }
}