Vue 3- useI18n - Uncaught :必须在“`setup`”函数的顶部调用
Vue 3- useI18n - Uncaught :必须在“`setup`”函数的顶部调用
提问于 2022-06-16 21:06:28
我对useI18n有一个无法解决的问题。无论我做什么，我都无法让i18n翻译工作，并且在我的控制台中总是看到以下消息：
Uncaught :必须在
setup函数顶部调用
堆栈跟踪显示，它发生在调用useI18n()函数时，尽管它位于一个名为setup的函数中。堆栈跟踪的下一个级别显示，在`useI18n()函数中，由于未检测到我的应用程序的实例，会引发异常。
function useI18n(options = {}) {
const instance = getCurrentInstance();
if (instance == null) {
throw createI18nError(I18nErrorCodes.MUST_BE_CALL_SETUP_TOP);
}
...我的代码如下：
main.js
// frontend/src/main.ts
import i18n from './i18n';
import Vue, { createApp } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import App from './App.vue';
//Vue.use(VueI18n);
const app = createApp(App);
app.use(VueAxios, axios, i18n);
app.provide('axios', app.config.globalProperties.axios);
app.mount('#i-english-editor');
console.log(app);i18n.ts
import { createI18n } from "vue-i18n";
const i18n = createI18n({
legacy: false,
locale: "ja",
fallbackLocale: 'en',
globalInjection: true,
messages: {
en: {
message: {
language: "English",
greeting: "Hello !"
}
},
ar: {
message: {
language: "العربية",
greeting: "السلام عليكم"
}
},
es: {
message: {
language: "Español",
greeting: "Hola !"
}
}
}
});
export default i18n;App.vue
<div>
{{ t('message.greeting') }}
</div>
...
<script lang="ts">
import {defineComponent, ref, inject} from "vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
setup() {
const { t } = useI18n();
...
return {
...
{t},
}
}
});
</script>正如您所看到的，我的代码看起来就像在线展示如何让翻译工作的各种例子。我看过各种各样的解决方案，但没有一个对我有帮助。这包括尝试另一种方法，将globalInjection设置为true，并在显示错误的标记中使用{{ $t('message.greeting') }}：
ctx.t不是一个函数。
我真的处于死胡同，无法找到一个似乎对大多数人有效的解决方案。我的Vue版本是Vue 3，我使用的i18n版本是vue-i18n@9.2.0beta.36。
如果有人知道为什么会发生在我身上，但没有其他人，如果你有解决办法，我会很感激的。
回答 1
Stack Overflow用户
发布于 2022-06-16 21:30:30
更新-我设法解决了。
首先，我摆脱了使用useI18n函数的需要，并意识到$t由于同一个app.use(...)函数中的多个导入而失败。
我把它改成：
app.use(VueAxios, axios);
app.use(i18n as any);app.use向控制台抛出了更多的错误，因为i18n不是一个可接受的类型。为了解决这个问题，我从另一篇文章中发现，添加as any是解决这个问题的一种方法。因此，{{ $t(...) }}现在正在产生所需的结果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72651884
复制相关文章
相似问题
腾讯云开发者
