i18n 插件需要在“入口”组件(即构成 Web 组件基础的组件)而不是根组件上进行初始化。
但即便如此,重要的是所有消息都在 entry 组件上定义。在子组件上定义消息,无论是直接在组件中还是使用<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>