使用 Vuetify 和 Vue-i18n 翻译 [英] Use both Vuetify and Vue-i18n translations
问题描述
我正在使用 Vuetify,并希望为按钮添加我自己的翻译,并使用 Vuetify 提供的翻译.我目前的 Vuetify 配置文件设置如下:
I am using Vuetify and want to add my own translations for buttons for example and also use the translations provided by Vuetify. I currently have my Vuetify config file setup like this:
import Vue from "vue"
import Vuetify from "vuetify"
import "vuetify/dist/vuetify.min.css"
import "@fortawesome/fontawesome-free/css/all.css"
import VueI18n from "vue-i18n"
import messages from "./i18n"
import en from 'vuetify/es5/locale/en'
import nl from 'vuetify/es5/locale/nl'
Vue.use(Vuetify)
Vue.use(VueI18n)
const locale = navigator.language
const i18n = new VueI18n({
locale: locale,
messages: messages,
})
export default new Vuetify({
theme: {
themes: {
light: {
primary: "#8BC34A",
secondary: "#627ACC"
}
}
},
icons: {
iconfont: "fa",
},
lang: {
locales: { en, nl },
current: locale,
t: (key, ...params) => i18n.t(key, params),
},
});
我的 locale
设置为 nl
,但是当我将它设置为 en
时,它给了我以下错误:
My locale
is set to nl
, but also when I set it to en
it gives me the following errors:
键 '$vuetify.noDataText' 的值不是字符串!无法翻译
Value of key '$vuetify.noDataText' is not a string! Cannot translate
keypath '$vuetify.noDataText' 的值.使用keypath的值默认.
the value of keypath '$vuetify.noDataText'. Use the value of keypath as default.
但是当我将 Vuetify 翻译消息添加到我的 i18n
文件时,它可以工作:
But when I add the Vuetify translation messages to my i18n
file it works:
const messages = {
en: {
$vuetify: {
noDataText: 'No data available',
},
}
但在理想情况下,我想将 Vuetify 翻译、荷兰语自定义翻译和英语自定义翻译分开放在不同的文件中.有人可以帮我找出如何分离翻译逻辑吗?
But in an ideal situation I would like to separate the Vuetify translations, Dutch custom translations and English custom translations in different files. Could someone please help me find out how I can separate the translation logic?
推荐答案
如果你没有在 vue-i18n 中自定义 vuetify 的翻译,那么你不需要集成它.您可以在组件中以通常的方式使用 vue-i18n 来处理您自己的字符串,并在 vuetify 选项中省略 lang.t
.
If you aren't customising vuetify's translations in vue-i18n then you don't need to integrate it. You can use vue-i18n the usual way for your own strings in your components and leave off lang.t
in the vuetify options.
这篇关于使用 Vuetify 和 Vue-i18n 翻译的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!