vue 3- usei18n- untureck的语法：必须在“设置”函数的顶部调用

Question

我对无法解决的 usei18n 有问题。无论我做什么，我都无法使i18n翻译工作，并且在我的控制台上永久看到此消息：

unduarking语法：必须在设置的顶部调用函数

堆栈轨道的函数，即当调用 usei> usei18n（）函数时，它会发生这种情况，尽管它在一个称为<的函数范围内代码>设置。下一个级别的堆栈跟踪揭示了``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>

如您所见，我的代码看起来像是在线上的各种示例，向我展示了如何使翻译工作。我看过各种解决方案，它们都不为我工作。这包括尝试设置 GlobalInction 的替代方法 true 和使用 {{$ t（'Message.greeting'）}}}} 揭示了错误：

ctx。$ t不是函数

我实际上是死胡同，无法找到似乎对大多数人有用的解决方案。我的Vue版本是VUE 3，我正在使用的I18N版本是。

如果有人知道为什么这会发生在我身上，但没有其他人，如果您有解决方案，我会很感激。

Answer 1

这是一个古老的问题，但是今天我发现了同样的问题，并且在网上尚不清楚静止。

似乎Usei18n（）是由组成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.use 正在将更多的错误扔到控制台中，因为 i18n 不是接受的类型。为了解决这个问题，我从另一个帖子的解决方案中发现了将添加为任何的解决方案，这是解决此问题的一种方式。结果， {{$ t（...）}} 现在正在产生所需的结果。

Answer 3

我遇到了同样的问题，但对我而言，事实证明这是矛盾的VUE版本。
我的依赖性使用了VUE 3.5.3，并且也将VUE 3.2.41作为直接依赖性。

作为解决方案，我选择保持直接依赖性，但将其放在与其他间接依赖性相同的VUE版本上（3.5.3）。保持直接依赖性的原因是，它允许Intellij Idea索引软件包并具有自动完成。