vue-i18 n不使用vuetify组件字符串

50pmv0ei 于 2023-10-23 发布在 Vue.js

关注(0)|答案(2)|浏览(147)

我尝试使用vue-i18 n来翻译我的应用程序。我也使用vuetify和vue。
目前我会英语和德语。这是我的项目结构和代码。

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;

locale/en.js

export default {
    hello: "hello",
};

locale/de.js

export default {
    hello: "Hallo",
    $vuetify: {
        dataIterator: {
          rowsPerPageText: "Einträge pro Seite:",
          pageText: "{0}-{1} von {2}",
        },
    }
};

plugins/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的原始名称。但这是行不通的。
例如，v-select组件如下所示：

其他组件也不工作。
我做错了什么？

vue.js

来源：https://stackoverflow.com/questions/65278604/vue-i18n-not-use-vuetify-components-strings

2条答案

按热度按时间

5ktev3wc1#

您缺少默认的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}",
    },
  }
};

赞(0）回复(0）举报 2023-10-23

djmepvbi2#

在我使用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,
    },
  },
})

赞(0）回复(0）举报 2023-10-23

我来回答

vue-i18 n不使用vuetify组件字符串

2条答案

相关问题

热门标签

最新问答