Vue.js 如何在vue web组件中使用vue-i18n？

我正在使用Vue cli 3和

--target wc

选项创建Vue web组件。我还需要该组件来使用vue-i18n插件，这需要将一些选项传递到主vue实例，如下所示：

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

在常规的Vue应用程序中，这很好，因为我控制主Vue实例的构造。但是，当构建为web组件时，主Vue对象的构造是由Vue web组件包装器生成的，我看不到任何明显的方式来影响它

---

如何在我的web组件中使用vue-18n插件？

i18n插件需要在“条目”组件（即构成web组件基础的组件）而不是根组件上初始化

但即使这样做，重要的是所有消息都在条目组件上定义。直接在组件中或使用

元素在子组件上定义消息，会有效地覆盖条目组件中的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>

{{$t（'hello'）}

从“/child.vue”导入子组件
从“Vue”导入Vue
从“vue-i18n”导入VueI18n
Vue.use（VueI18n）
导出默认值{
名称：“应用程序”，
i18n：新的VueI18n({
地区：'ja'，
信息：{
嗯:{
您好：“英语中的您好”，
测试：“英语测试”
},
ja:{
你好：“你好在ja”，
测试：“ja测试”
},
}
}),
组件：{ChildComponent}
};

子组件

<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>

{{$t（“测试”）}
导出默认值{
名称：“子组件”
};

i18n插件需要在“条目”组件（即构成web组件基础的组件）而不是根组件上初始化

但即使这样做，重要的是所有消息都在条目组件上定义。直接在组件中或使用

元素在子组件上定义消息，会有效地覆盖条目组件中的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>

{{$t（'hello'）}

从“/child.vue”导入子组件
从“Vue”导入Vue
从“vue-i18n”导入VueI18n
Vue.use（VueI18n）
导出默认值{
名称：“应用程序”，
i18n：新的VueI18n({
地区：'ja'，
信息：{
嗯:{
您好：“英语中的您好”，
测试：“英语测试”
},
ja:{
你好：“你好在ja”，
测试：“ja测试”
},
}
}),
组件：{ChildComponent}
};

子组件

<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>

{{$t（“测试”）}
导出默认值{
名称：“子组件”
};

我认为“本地组件注册”可能会解决您的问题。请检查：@JimB.，我在组件注册方面没有问题。vue-i18n安装说明要求我向根vue vm添加一个新对象。在web组件中，唯一的“根”vm是入口组件，在其中添加VueI18n对象似乎不起作用。我认为“本地组件注册”可能会解决您的问题。请检查：@JimB.，我在组件注册方面没有问题。vue-i18n安装说明要求我向根vue vm添加一个新对象。在web组件中，唯一的“根”vm是入口组件，在那里添加VueI18n对象似乎不起作用。