Das Gebietsschema für Vue i18n kann nicht dynamisch geändert werden

Ich habe eine kleine Vue-Anwendung, in der ich das Vue-i18n-Plugin implementieren möchte, um meine Anwendung mehrsprachig zu machen. Ich habe das Vue-i18n-Plugin von Vue CLI installiert. Ich habe zwei Gebietsschemas und alles funktioniert wie erwartet – wenn ich das Gebietsschema manuell aus der .env-Datei in die gewünschte Sprache ändere, ändert sich auch die Sprache in der Anwendung. Wenn ich jedoch versuche, es über die Schaltflächen im Frontend zu ändern, gelingt mir das nicht.

Dies ist der Inhalt meiner i18n.js-Datei:

import { createI18n } from 'vue-i18n'

function loadLocaleMessages() {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages = {};
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  })
  return messages;
}

export default createI18n({
  legacy: false,
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

Das ist in der .env-Datei:

VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en

Das ist der Code aus den Tutorials, die ich gesehen habe, sie greifen über this.$i18n.locale auf das Gebietsschema zu, das funktioniert jedoch bei mir nicht, ich habe versucht, es so zu implementieren:

<template>
  <div class="hello">
    <h1>Hello World</h1>
    <h2>{{ t("hello") }}</h2>
    <h2>{{ t("message") }}</h2>
    <button @click="SetLocale('en')">EN</button>
    <button @click="SetLocale('nl')">NL</button>
  </div>
</template>
    
<script>
import { useI18n } from "vue-i18n";
export default {
  name: "HelloWorld",
  setup() {
    const { t } = useI18n({
      inheritLocale: true,
      useScope: "local",
    });

    // Something todo ..

    return {
      t
    };
  },
  methods: {
    SetLocale(locale) {
      console.log(locale);
      this.$i18n.locale = locale;
    },
  },
};
</script>
    
<i18n>
{
  "en": {
    "hello": "Hello i18n in English! (from component)",
  },
  "nl": {
    "hello": "Hello i18n in Dutch! (from component)",
  }
}
</i18n>

Der Fehler, der beim Klicken auf die Schaltfläche auftritt, ist:

[Vue-Warnung]: Unbehandelter Fehler während der Ausführung des nativen Event-Handlers

Uncaught TypeError: Eigenschaft von undefiniert (set.) kann nicht festgelegt werden 'Gebietsschema')

Ich habe einige andere Lösungen wie i18n.locale und this.$root.$i18n.locale ausprobiert, aber auch sie scheinen nicht zu funktionieren.

Wenn ich außerdem versuche, auf das

der Nachricht aus der JSON-Datei im Gebietsschemaordner zuzugreifen, erhalte ich diese Warnungen:

[intlify] Der Schlüssel „message“ wurde in der Locale-Nachricht „nl“ nicht gefunden.

[intlify] Fallback zur Übersetzung des „message“-Schlüssels mit „en“-Gebietsschema

[intlify] Der Schlüssel „Nachricht“ kann in den Gebietsschema-Nachrichten „en“ nicht gefunden werden.

[intlify] Fallback zur Verwendung des Gebietsschemas „nl“, um den Schlüssel „message“ zu übersetzen

Meine Frage ist: Wo mache ich etwas falsch und gibt es eine Möglichkeit, die Warnung zu entfernen, die ich erhalte, wenn ich versuche, über den Locale-Ordner auf eine JSON-Datei zuzugreifen?

P粉211600174257 Tage vor473

Das Gebietsschema für Vue i18n kann nicht dynamisch geändert werden

{{ t("message") }}

Antworte allen(1)Ich werde antworten