使用 Vue.extend 时使用来自 SFC 的 I18n 翻译消息

Question

我正在开发一个要迁移到 VueJS 的应用程序，因此某些部分使用旧的 jQuery 代码。

所以我尝试使用 jQuery 附加一个 VueJS 组件，所以我做了

import copyToClipboard from '../components/_base/VCopyToClipboard';

const CopyToClipboard = Vue.extend(copyToClipboard);
  $(event.currentTarget).find('.dns-challenge-row').each((index, element) =>     {
    const component = new CopyToClipboard({
      propsData: {
        targetId: $(element).find('code').attr('id'),
      },
    }).$mount();

    $(element).append(component.$el);
  });

一切正常，但是当我进入附加此组件的页面时，i18n return 一个错误

Cannot translate the value of keypath 'tooltip.default'. Use the value of keypath as default.

仅供参考，我的翻译消息是使用 i18n 关键字

在我的 SFC 中直接定义的

i18n: {
  messages: {
    en: {
      tooltip: {
        default: 'Copy content',
        success: 'Copied',
      },
    },
    fr: {
      tooltip: {
        default: 'Copier le contenu',
        success: 'Copié',
      },
    },
  },
},

然后我直接在 SFC 中使用 this.$t('tooltip.default')

我的 i18n 像文档所说的那样导入，但在我用来创建组件的 vue.js 之后加载。

import {
  Vue,
} from './vue';
import VueI18n from 'vue-i18n';
import en from '../../translations/en';
import fr from '../../translations/fr';

Vue.use(VueI18n);

export default new VueI18n({
  locale: document.getElementsByTagName('html')[0].getAttribute('lang'),
  messages: {
    en,
    fr,
  },
});

vue.js 文件是我放置所有 Vue.use() 定义、路由器和其他内容的文件，用于在另一个文件中创建 Vue 实例

vueSetup(new Vue({
  el: '#app',
  components: {
    ...
  },
  i18n: i18n,
  router: router,
  store: store,
}));

你有解决这个问题的想法吗？

我尝试在 vue 组件之前加载 i18n 但没有成功，我看到了很多 GitHub 这个错误的问题，但不像我的情况。

Answer 1

只需导入并添加i18n实例到新的组件实例

const CopyToClipboard = Vue.extend(copyToClipboard);
  $(event.currentTarget).find('.dns-challenge-row').each((index, element) =>     {
    const component = new CopyToClipboard({
      i18n: i18n,
      propsData: {
        targetId: $(element).find('code').attr('id'),
      },
    }).$mount();

    $(element).append(component.$el);
});

使用 Vue.extend 时使用来自 SFC 的 I18n 翻译消息

Use I18n translation messages from SFC when using Vue.extend

javascript

vue.js

vue-component

vuejs2

vue-i18n