Vue2如何在插件中获取i18n多语言翻译功能的调用方法

Vue 2 配套的 vue-i18n v8 版本并未将翻译方法直接挂载到 Vue 构造函数本身，而是挂载到 Vue 原型以及你初始化生成的 i18n 实例上，所以直接调用 Vue.t() 自然无法生效。

可通过以下两种常用方案实现调用：

• 方案1：直接引入初始化完成的i18n实例
  项目中初始化vue-i18n的配置文件（通常为src/i18n/index.js）会导出创建好的i18n实例，直接在自定义插件中引入该实例即可调用翻译方法，示例代码如下：

  // 自定义插件文件
  import i18n from '@/i18n'
  
  export default {
    install(Vue, options) {
      // 直接调用i18n实例的t方法获取翻译结果
      const translateText = i18n.t('path.to.msg')
      
      // 挂载为全局方法的示例
      Vue.prototype.$myCustomMethod = function() {
        return i18n.t('path.to.another.msg')
      }
    }
  }
  

• 方案2：通过Vue原型访问翻译方法
  组件内可通过this.$t调用是因为vue-i18n已经把翻译方法挂载到了Vue.prototype上，你在自定义插件的install方法里可以直接读取该属性：

  export default {
    install(Vue, options) {
      const translateText = Vue.prototype.$t('path.to.msg')
    }
  }
  

注意：请确保i18n插件的注册顺序在你的自定义插件之前，即先执行Vue.use(VueI18n)并完成i18n实例初始化，再注册自定义插件，避免出现方法未定义的报错。

内容的提问来源于stack exchange，提问作者Čamo