我尝试使用 vue-i18n 来翻译我的应用程序。我还使用 vuetify 和 vue cli。
目前我有英语和德语。 这是我的项目结构和代码。
main.js
import Vue from "vue";
import i18n from "./plugins/i18n";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
new Vue({
vuetify,
i18n,
render: (h) => h(App),
}).$mount("#app");
插件/i18n.js
import Vue from "vue";
import VueI18n from "vue-i18n";
import de from "@/locale/de";
import en from "@/locale/en";
Vue.use(VueI18n);
const messages = {
de: de,
en: en,
};
const i18n = new VueI18n({
locale: "de",
fallbackLocale: "en",
messages,
});
export default i18n;
语言环境/en.js
export default {
hello: "hello",
};
语言环境/de.js
export default {
hello: "Hallo",
$vuetify: {
dataIterator: {
rowsPerPageText: "Einträge pro Seite:",
pageText: "{0}-{1} von {2}",
},
}
};
插件/vuetify.js
import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import i18n from "./i18n";
Vue.use(Vuetify);
export default new Vuetify({
lang: {
t: (key, ...params) => i18n.t(key, params),
},
});
在
hello
翻译下一切正常,但 vuetify 组件无法按预期工作。
我想将来为一些 vuetify 组件添加德语翻译。
但目前 a 想使用 vuetify 的原始名称。但这是行不通的。
其他组件也无法工作。
我做错了什么?
您缺少默认的 vuetify 组件区域设置。您应该通过在您的语言环境中重写它们来提供它,或者在每个语言环境文件的开头导入它。
locale/en.js
import { en } from 'vuetify/lib/locale'
export default {
$vuetify: { ...en },
hello: "hello",
};
locale/de.js
import { de } from 'vuetify/lib/locale'
export default {
hello: "Hallo",
$vuetify: {
...de,
dataIterator: {
rowsPerPageText: "Einträge pro Seite:",
pageText: "{0}-{1} von {2}",
},
}
};
在我使用 Vue3 和 vuetify 的设置中,我可以用以下方法修复它:
import { createI18n } from "vue-i18n"
import { de as vuetifyDe, en as vuetifyEn } from "vuetify/locale"
import customDe from "./de.json"
export const i18n = createI18n({
legacy: false,
locale: "de",
fallbackLocale: "en",
messages: {
de: {
// we add the vuetify locales to our locale to prevent warnings in the console
$vuetify: vuetifyDe,
...customDe,
},
en: {
// we add the vuetify locales to our locale to prevent warnings in the console
$vuetify: vuetifyEn,
},
},
})
更新 Vuetify 3 及更高版本 + 如果使用 vue-i18n:docs
如果您正在使用 vue-i18n 库,您可以非常轻松地将其与 Vuetify 集成。这使您可以将所有翻译保存在一处。只需在消息中创建 $vuetify 条目并添加相应的语言更改即可。然后使用提供的适配器功能将 vue-i18n 连接到 Vuetify(如下例所示)。
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
import { createI18n, useI18n } from 'vue-i18n'
import { en, sv } from 'vuetify/locale'
const messages = {
en: {
$vuetify: {
...en,
dataIterator: {
rowsPerPageText: 'Items per page:',
pageText: '{0}-{1} of {2}',
},
},
},
sv: {
$vuetify: {
...sv,
dataIterator: {
rowsPerPageText: 'Element per sida:',
pageText: '{0}-{1} av {2}',
},
},
},
}
const i18n = createI18n({
legacy: false, // Vuetify does not support the legacy mode of vue-i18n
locale: 'sv',
fallbackLocale: 'en',
messages,
})
const vuetify = createVuetify({
locale: {
adapter: createVueI18nAdapter({ i18n, useI18n }),
},
})
const app = createApp()
app.use(i18n)
app.use(vuetify)
app.mount('#app')