我有一款小型 vue 应用，我想在其中实现 vue-i18n 插件，以使我的应用支持多种语言。我已从 vue cli 安装了 vue-i18n 插件。我有两个语言环境，并且一切都按预期工作 - 每当我手动将语言环境从.env 文件更改为所需语言时，应用程序中的语言也会更改。但是，每当我尝试使用前端的按钮更改它时，我都无法这样做。

这是我在 i18n.js 文件中的内容：

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()
})

这是在 .env 文件中：

VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en

这是我看到的教程中的代码，他们通过 this.$i18n.locale 访问语言环境，但这对我来说不起作用，这是我尝试实现它的方式：

<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>

我收到的错误是：

[Vue warn]: Unhandled error during execution of native event handler

Uncaught TypeError: Cannot set properties of undefined (setting 'locale')

我尝试过其他一些解决方案，例如 i18n.locale 和 this.$root.$i18n.locale 但它们似乎也不起作用。

此外，当我尝试访问 <h2>{{ t("message") }}</h2> 时，其中 message 来自 locales 文件夹中的 JSON 文件，我收到以下警告：

[intlify] Not found 'message' key in 'nl' locale messages.

[intlify] Fall back to translate 'message' key with 'en' locale

[intlify] Not found 'message' key in 'en' locale messages.

[intlify] Fall back to translate 'message' key with 'nl' locale

我的问题是，我在哪里做错了什么，有没有办法摆脱当我尝试从 locales 文件夹访问 JSON 文件时出现的警告>