使用I18n和脚本设置的Vue3国际化(vite)

Question

我正在尝试国际化我的Vue3(与Vite设置)项目与@intlify/vite-plugin-vue-i18n和我使用<script setup>

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

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

所以我的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;

component.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对象。