Vue国际化在js文件中的使用

Vue国际化在js文件中的使用

如何在js文件中使用i18n国际化

描述：在前后端分离项目中，我们会常常使用到js文件，但是如何对js文件里的文字进行国际化？

示例：在下面示例中是前后端分离项目常用到的对axios的封装，当请求令牌失效时对系统进行提示。但是如果我们想要进行国际化，常规的引用Vue是不可行的。

      if (res.code === 'C1000002') {
        MessageBox.confirm('内容', '标题'), {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         //TODO
        })
      }

解决：在main.js文件中把Vue对象赋值给一个变量

//window.vm = new Vue()
window.vm = new Vue({
  el: '#app',
  i18n,
  router,
  store,
  template: '<App/>',
  components: { App }
})

然后在示例代码中进行如下修改

if (res.code === 'C1000002') {
    //使用window.vm.$t() 即可达到国际化效果
        MessageBox.confirm(window.vm.$t('authentication.failed.message'), window.vm.$t('authentication.failed.confirmLogout'), {
          confirmButtonText: window.vm.$t('authentication.failed.reLogin'),
          cancelButtonText: window.vm.$t('authentication.failed.cancel'),
          type: 'warning'
        })
      }