[英]How can I use vue-i18n in a Vue web component?
我正在使用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插件?
i18n插件需要在“入口”组件(即构成Web组件基础的组件)而不是根组件上进行初始化。
但是即使这样做, 在入口组件上定义所有消息也很重要。 直接在组件中或使用<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.