我正在尝试将我的 Vue3(带有 Vite 设置)项目国际化@intlify/vite-plugin-vue-i18n
我正在使用<script setup>
我不断得到Uncaught TypeError: i18n.global is undefined
但一切似乎都是正确的。我曾经尝试过官方文档中的原始代码,你可以找到here
无论我做什么,Vue 或 i18n 都找不到global
i18n 的属性。
所以我的 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>