Question

我正在按照here的说明与vue-i18n一起使用vuetify。

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),
});

为避免我们不断增长的代码库中的错误，我想合并eslint plugin for i18n.

但是，使用vue-i18n的vuetify希望键在代码内看起来像这样：

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

en.json（在单独的文件中）如下所示：

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

，但是eslint插件无法识别为匹配项。它希望代码看起来像这样：

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

如何重组加载json的方式，以确保可以在linter中使用i18n在vuetify中？

Answer 1

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

这是如果您仅使用vuetify的内置国际化。与vue-i18n结合使用时，您应该使用$t('components.ActionBtn')并在i18n配置中包含所需的vuetify消息。

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

1 个答案: