Vue3 国际化与 I18n 和脚本设置 (vite)

Question

我正在尝试将我的 Vue3（带有 Vite 设置）项目国际化，并且@intlify/vite-plugin-vue-i18n我正在使用<script setup>

我不断得到Uncaught TypeError: i18n.global is undefined，但一切似乎都是正确的。我什至尝试过官方文档中的原始代码，您可以在这里找到

无论我做什么，Vue 或 i18n 都找不到globali18n 的属性。

所以我的 i18n.js 是这样的：

import { nextTick } from "vue";
import { createI18n } from "vue-i18n";
import axios from "axios";
import tr from "../src/locales/tr.json";
import en from "../src/locales/en.json";

export const SUPPORT_LOCALES = ["tr", "en"];

export function setupI18n(options = { locale: "tr" }) {
  const i18n = createI18n(options);
  setI18nLanguage(i18n, options.locale);
  return i18n;
}

export function setI18nLanguage(i18n, locale) {
  if (i18n.mode === "legacy") {
    i18n.global.locale = locale;
  } else {
    i18n.global.locale.value = locale;
  }

  axios.defaults.headers.common["Accept-Language"] = locale;

  document.querySelector("html").setAttribute("lang", locale);
}

  export async function loadLocaleMessages(i18n, locale) {

  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  );

  // set locale and locale message
  i18n.global.setLocaleMessage(locale, messages.default);

  return nextTick();
}

const i18n = createI18n({
  legacy: false,
  locale: "tr",
  fallbackLocale: "tr",
  globalInjection: true,
  messages: {
    tr,
    en,
  },
});
export default i18n;

组件.vue

<script setup>
  import { ref, onBeforeMount } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { SUPPORT_LOCALES, setupI18n, setI18nLanguage, loadLocaleMessages } from '../../i18n.js'

  const { locale } = useI18n() // same as `useI18n({ useScope: 'global' })`
  const currentLocale = ref(locale.value)

  function selectLanguage(language) {
    // locale.value = language.target.value
    loadLocaleMessages()
  }

  onBeforeMount(() => {
    setI18nLanguage(currentLocale.value)
  })
</script>

Answer 1

对我有用的是添加import i18n from '@/i18n';到 vue 组件中的脚本设置。然后我就可以访问该i18n.global对象了。