Question

我正在使用vue-cli 3和--target wc选项创建Vue Web组件。我还需要该组件使用vue-i18n插件，该插件需要将某些选项传递给主Vue实例，如下所示：

new Vue({
    i18n: new VueI18n({ ... ])
    ...
})

在常规Vue应用程序中，这很好，因为我控制主Vue实例的构造。但是，当构建为Web组件时，主要的Vue对象的构建是由vue-web-component-wrapper生成的，我看不出有任何明显的方法可以影响它。

如何在Web组件中使用vue-18n插件？

Answer 1

需要在“入口”组件（即构成Web组件基础的组件）而不是根组件上初始化i18n插件。

但是即使这样做，所有消息都在输入组件上定义很重要。直接在组件中或使用<i18n>元素在子组件上定义消息，可以有效地覆盖条目组件中的vue-i18n配置，并使该子组件使用默认的en-US语言。

这是一个简单的工作示例：

入口组件

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <child-component />
  </div>
</template>

<script>
import ChildComponent from "./child.vue"
import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)

export default {
  name: "App",
  i18n: new VueI18n({
    locale: 'ja',
    messages: {
      en: {
        hello: "hello in en",
        test: "test in en"
      },
      ja: {
        hello: "hello in ja",
        test: "test in ja"
      },
    }
  }),
  components: { ChildComponent }
};
</script>

子组件

<template>
  <div>{{ $t("test") }}</div>
</template>

<script>
export default {
  name: "child-component"
};
</script>

Answer 2

@tctimmeh 解决方案的问题是 i18n plugin 需要实际传递到 new Vue 构造函数中，但是在使用 web components wrapper 时我们无法访问 {{1}因为它在包装库内因此，幸运的是感谢这个 PR https://github.com/kazupon/vue-i18n/pull/420/commits/13ed0488caf70ab454ffd5cb2affa36ec31c4c50 我们可以在实例化之前使用 new Vue

的瞬间扩展 Vue 对象

VueI18n

如何在Vue Web组件中使用vue-i18n？

2 个答案: