我正在使用 vue-cli 3 创建一个 Vue Web 组件--target wc
选项。我还需要该组件来使用 vue-i18n 插件,这需要将一些选项传递给主 Vue 实例,如下所示:
new Vue({
i18n: new VueI18n({ ... ])
...
})
在常规 Vue 应用程序中,这很好,因为我控制主 Vue 实例的构造。然而,当构建为 Web 组件时,主 Vue 对象的构造是由 vue-web-component-wrapper 生成的,我没有看到任何明显的方式来影响它。
如何在我的 Web 组件中使用 vue-18n 插件?
i18n 插件需要在“entry”组件(即构成 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)