Vue 3 - useI18n - 未捕获的语法错误：必须在“setup”函数的顶部调用

Question

我有一个问题useI18n我有一个无法解决的无论我做什么，我都无法让 i18n 翻译正常工作，并且在我的控制台中永远看到以下消息：

\n

\n

setup未捕获的语法错误：必须在函数顶部调用

\n

\n

堆栈跟踪显示，useI18n()尽管该函数位于名为 的函数内，但调用该函数时会发生这种情况setup。堆栈跟踪的下一个级别显示，在“useI18n()”函数中，由于未检测到我的应用程序的实例，因此引发了异常。

\n

function useI18n(options = {}) {\n    const instance = getCurrentInstance();\n    if (instance == null) {\n        throw createI18nError(I18nErrorCodes.MUST_BE_CALL_SETUP_TOP);\n    }\n...\n

\n

我的代码如下：

\n

main.js

\n

// frontend/src/main.ts\n\nimport i18n from './i18n';\n\nimport Vue, { createApp } from 'vue';\n\nimport axios from 'axios';\nimport VueAxios from 'vue-axios';\n\nimport App from './App.vue';\n\n//Vue.use(VueI18n);\n\nconst app = createApp(App);\napp.use(VueAxios, axios, i18n);\napp.provide('axios', app.config.globalProperties.axios);\napp.mount('#i-english-editor');\n\nconsole.log(app);\n

\n

i18n.ts

\n

import { createI18n } from "vue-i18n";\n\nconst i18n = createI18n({\n  legacy: false,\n  locale: "ja",\n  fallbackLocale: 'en',\n  globalInjection: true,\n  messages: {\n    en: {\n      message: {\n        language: "English",\n        greeting: "Hello !"\n      }\n    },\n    ar: {\n      message: {\n        language: "\xd8\xa7\xd9\x84\xd8\xb9\xd8\xb1\xd8\xa8\xd9\x8a\xd8\xa9",\n        greeting: "\xd8\xa7\xd9\x84\xd8\xb3\xd9\x84\xd8\xa7\xd9\x85 \xd8\xb9\xd9\x84\xd9\x8a\xd9\x83\xd9\x85"\n      }\n    },\n    es: {\n      message: {\n        language: "Espa\xc3\xb1ol",\n        greeting: "Hola !"\n      }\n    }\n  }\n});\n\nexport default i18n;\n

\n

应用程序.vue

\n

<div>\n{{ t('message.greeting') }}\n</div>\n...\n<script lang="ts">\nimport {defineComponent, ref, inject} from "vue";\nimport { useI18n } from "vue-i18n";\n\nexport default defineComponent({\n  setup() {\n    const { t } = useI18n();\n\n...\n\n\n    return {\n      ...\n      {t},\n    }\n  }\n});\n</script>\n

\n

正如您所看到的，我的代码看起来像在线的各种示例，向我展示了如何使翻译正常工作。我查看了各种解决方案，但没有一个对我有用。globalInjection这包括尝试设置true和使用的替代方法{{ $t('message.greeting') }}该方法会显示错误：

\n

\n

ctx.$t 不是函数

\n

\n

我确实陷入了死胡同，无法找出似乎对大多数人都有效的解决方案。我的 Vue 版本是 Vue 3，我使用的 i18n 版本是 vue-i18n@9.2.0-beta.36。

\n

如果有人知道为什么这种情况发生在我身上而不是其他人，如果您有解决方案，我将不胜感激。

\n

Answer 1

这是一个老问题，但今天我在网上发现了同样的问题，而且仍然不清楚。

看起来 useI18n() 是一个由 Composition API 实现的组合函数，必须在设置函数的顶部调用，要在没有设置的 TS 文件上使用，我们需要使用 useNuxtApp() 来添加上下文。

export default (): string => {
  const { $i18n } = useNuxtApp();
  const t = $i18n.t;

  return t('my-translation-key');
};

我希望有帮助。

Answer 2

更新-我设法解决了它。

首先，我摆脱了使用该useI18n函数的需要，并意识到$t由于同一app.use(...)函数内的多次导入而失败。

我把它改为：

app.use(VueAxios, axios);
app.use(i18n as any);

app.usei18n由于不是可接受的类型，因此在控制台中抛出了更多错误。为了解决这个问题，我从另一篇文章的解决方案中发现，添加as any它是解决这个问题的一种方法。结果{{ $t(...) }}现在正在产生期望的结果。