随着国内业务对外的不断发展，海外语言的需求日益攀升，vue有一个很好用的工具 vue-i18n，可以实现页面在不同语言之间来回切换。

一. 基础用法

1. 安装插件 vue-i18n

 yarn add vue-i18n
 npm  install vue-i18n

2. 在 main.js 中导入并作为插件使用

 import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
  或 Vue.use({ i18n: (key, value) => i18n.t(key, value) })
  
  store.commit('setLang', /^en\b/.test(navigator.language))//全局定义
  
    new Vue({
    router,
    store,
    i18n, //挂载在全局
    render: (h) => h(App)
  }).$mount('#app')
})()

3. 创建语言包（因翻译语言内容过多，一般会单独创建文件夹）

4. index配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './language/zh'
import en from './language/en'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    zh: { ...zh },
    en: { ...en }
  },
  //silentTranslationWarn: true //配置翻译包时如果弹出大量警告时配置
})

export default i18n

5. zh中文翻译包

const zh = {
  title: '工资查询',
  payDetails: '工资明细',
  bonus: '奖金明细',
}
export default zh

6. en英文翻译包

const en = {
  title: 'Payslip',
  payDetails: 'Salary Details',
  bonus: 'Bonus Details',
}
export default en

7. 组件中使用

<div class="title">{{ $t('frontPage.title')}}</div>

二. 注意事项

1.   data中定义时无法切换

以this.$t('xxx.xxx')在data中进行定义使用时，数据是无法正常进行语言转换的，需要将数据定义在  computed中后用this引用即可正常切换。 注：标签内部使用时不用加 {{ }}

  <li-select
      v-model="form[formVariables[index1]].value"
      clearable
      :placeholder="$t('pleaseChoose')"
   >

2.   不同转换方式

• 使用 /^en\b/.test(navigator.language)获取当前浏览器语言，全局调用，在页面中根据当前语言环境自动转换（正则用于判断当前语言类型，同一种语言可能有一些相似的名称，例如"en", "en-US"）。
• 页面中放入按钮，绑定@click事件转换

<template>
     <li-button type="primary" plain @click="$router.push('/history')">{{ $t('declarationHistory') }}</li-button>   
</template>
 
<script>
data(){
    return{
     language:this.$i18n.locale,//切换中英
    }
}
methods:{
    changeLang(){
          this.language=this.$i18n.locale === 'zh'? this.$i18n.locale = 'en': this.$i18n.locale = 'zh';
        }
 }
</script>

参考文献

Vue I18n