vue.js - 具有值属性的 vue-i18n $t 未翻译
问题描述
我正在尝试导入一个 .json 文件以用作翻译文件。
<template>
<template v-slot:footer>
<div>{{ $t('menu.file.new.label', $i18n.locale, locale) }}</div> <--Issue outputs menu.file.new.label
</template>
</template>
<script>
import locale from '@/locales/modules/messaging.json'
export default {
data() {
return {
locale: locale
}
}
}
</script>
如果我将以下内容添加到顶部,messaging.json 的语言环境没有任何错误并且可以工作
<i18n src="@/locales/modules/messaging.json"></i18n>
并将函数参数更改为排除$i18n.locale
并且locale
它可以工作。不幸的是,这不是一个选项,因为我想将数据传递给孙子组件。但是,如果我可以配置孙子使用他们的祖父母翻译数据也可以..
我怎样才能得到:
- 以上工作
- 或者,使用孙子中的祖父母翻译数据
- 或者,根据prop(要导入的翻译文件的位置)在孙子中动态导入翻译数据
谢谢
解决方案
首先,您应该创建一个如下所示的插件:
src/plugins/i18n.js:
import Vue from 'vue';
import VueI18n from 'vue-i18n';
const DEFAULT_LOCALE = 'en';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: yourLocale || DEFAULT_LOCALE, // set locale either from localStorage or config
fallbackLocale: DEFAULT_LOCALE,
messages: require('messages.json'), // set locale messages
sharedMessages: require('other.json if exist'),
silentFallbackWarn: true,
});
export default i18n;
然后从 main.js 调用它来全球化:
import i18n from './plugins/i18n.js';
...
new Vue({
i18n,
router,
...
render: h => h(App),
}).$mount('#app');
然后,如果您想继续使用自定义消息,可以使用 i18n 块进行设置,例如:
<script>
data(){
...
}
methods: ...
i18n: {
messages: require(your json path....)
}
</script>
然后你可以这样称呼它:
$t('test');
推荐阅读
- git - 如何通过 Meld 打开来自不同分支的两个文件的 git diff?
- spring - 是什么导致 - “DLQ 支持不适用于匿名订阅”?
- regex - 在保留字母数字单词的同时删除特殊字符
- templates - CUDA 模板化函数调用
- css - 在迷你购物车按钮之间添加边距
- intellij-idea - IntelliJ IDEA 不会在运行配置中的程序参数中扩展环境变量
- android - 所有文件夹中的图像,但仍然出现 ResouceNotFound 异常
- node.js - 如何为 Cardano (ada) 硬币安装完整的节点设置
- c# - Apache Ignite 缓存已创建但未显示
- sql - 为什么要使用别名来解决风扇陷阱?