Vue.js 将vuetify与i18n和eslint插件一起使用

我按照说明将vuetify与vue-i18n一起使用

translations.js：

const deDict = require('./i18n/vuetify/de.json');
const enDict = require('./i18n/vuetify/en.json');

export default class Translations {
  constructor() {
    this.messages = {
      de: deDict,
      en: enDict,
    };
  }
}

init.js：

import Translations from './translations';

// Create VueI18n instance with options
const tr = new Translations();
const i18n = new VueI18n({
  locale: 'en', // default locale is English
  messages: tr.messages, // set locale messages
});

Vue.use(Vuetify, {
  lang: {
    /* eslint-disable-next-line vue-i18n/no-dynamic-keys */
    t: (key, ...params) => i18n.t(key, params),
  },
}

const app = new Vue({
  i18n,
  el: '#app',
  data() {
    return {
      i18n,
    };
  },
  render: h => h(Main),
});

为了避免我们不断增长的代码库中出现错误，我想合并

但是，vuetify with vue-i18n希望密钥在代码中看起来像这样：

<a @click="buttonAction">
    {{ $vuetify.t('$vuetify.components.ActionBtn') }}
</a>

但是eslint插件并不认为这是匹配的。它希望代码如下所示：

{
  "components": {
    "ActionBtn": "Click me!"
  }
}

<a @click="buttonAction">
    {{ $vuetify.t('components.ActionBtn') }}
</a>

我如何重新构造加载json的方式，以确保在vuetify中使用i18n和linter

{{ $vuetify.t('$vuetify.components.ActionBtn') }}

---

如果您只使用vuetify的内置国际化，则会出现这种情况。与vue-i18n结合使用时，您应该使用$t'components.ActionBtn'，并在i18n配置中包含所需的vuetify消息

这是朝着正确方向迈出的一步。我仍然对如何让门楣接受标签内的东西感到困惑，但我感谢您的指导。