vue实现中英/中外语言切换

需求：实现中英文两种状态切换（晋级：多种语言切换），方便不同国家人员进行使用

以飞书业务为例

一. 基础用法  

安装插件 vue-i18n

yarn add vue-i18n npm install vue-i18n

 

在 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')
})()

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

1. 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

1. zh中文翻译包

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

1. en英文翻译包

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

1. 组件中使用

   <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')"
   >

1.   不同转换方式

   • 使用 /^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>

---

参考文献

1. Vue I18nhttps://kazupon.github.io/vue-i18n/zh/