如何在“server/api”目录下使用“useI18n”

Question

我正在使用

@nuxtjs/i18n

版本

^8.0.0-beta.7

，这是我的

nuxt.config.ts

:

import en from "./locales/en.json";

export default defineNuxtConfig({
  typescript: { strict: true, shim: false },
  components: true,
  runtimeConfig: {
    //...
  },
  modules: [
    "@nuxtjs/i18n",
    //...
  ],
  vueuse: { ssrHandlers: true },
  i18n: {
    vueI18n: {
      legacy: false,
      locale: "en",
      availableLocales: ["en", "fr"],
      messages: { en },
    },
  },
});

locales/en.json

{
  "foo": "bar"
}

pages

和

components

内的所有组件都工作正常，但是当我对

server/api

目录执行相同的操作时，会发生错误：

[nuxt] [request error] [unhandled] [500] useI18n is not defined                                                                         21:49:12  
  at /D:/Projects/saucemoe/.nuxt/dev/index.mjs:547:17
  at /D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:668:47
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Object.handler (/D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:723:19)
  at async Server.toNodeHandle (/D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:798:7)

server/api/test.get.ts

export default defineEventHandler((event) => {
  const { t } = useI18n();
  const foo = t("foo");

  return { foo };
});

但是如果我添加

import { useI18n } from "vue-i18n";

我会收到另一个错误：

[nuxt] [request error] [unhandled] [500] Must be called at the top of a setup function                                                  21:59:08
  at createCompileError (/D:/Projects/saucemoe/node_modules/@intlify/message-compiler/dist/message-compiler.mjs:54:19)
  at createI18nError (/D:/Projects/saucemoe/node_modules/vue-i18n/dist/vue-i18n.mjs:92:12)
  at useI18n (/D:/Projects/saucemoe/node_modules/vue-i18n/dist/vue-i18n.mjs:2229:15)
  at /D:/Projects/saucemoe/.nuxt/dev/index.mjs:548:17
  at /D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:668:47
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Object.handler (/D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:723:19)
  at async Server.toNodeHandle (/D:/Projects/saucemoe/node_modules/h3/dist/index.mjs:798:7)

import { useI18n } from "vue-i18n";

export default defineEventHandler((event) => {
  const { t } = useI18n();
  const foo = t("foo");

  return { foo };
});

总之，我如何在

useI18n

目录中使用

server/api

，非常感谢。

Answer 1

useI18n

只能在 Vue 设置上下文中使用，因此在 Nitro 中不可用。在 Nuxt 的 API 处理程序 (

/server/api

) 中使用 vue-i18n 的一种方法是在

/server/utils

中添加一个文件，该文件会在 Nitro 中重新创建一个 I18n 实例，并自动在

/server/api/

中导入。

就您而言，这将是

/server/utils/i18n.ts

import { createI18n } from "vue-i18n";
import type { I18nOptions } from "vue-i18n";

import en from "../../locales/en.json";

const messages: I18nOptions["messages"] = Object.assign({
  en: en,
});

const i18n = createI18n({
  legacy: false,
  locale: "en",
  availableLocales: ["en", "fr"], // note: you declare two available locales but only have one in messages
  messages,
});

export const { t, locale } = i18n.global;

并且你的 api 事件处理程序将被这样修改：

export default defineEventHandler((event) => {
  const foo = t("foo"); // t is auto-imported

  return { foo };
});

您可以通过将区域设置分配给

locale

引用 (

locale.value = "fr"

) 来修改区域设置。并且您需要将其传递给事件请求。

这可能不是最有效的方法，因为我不完全熟悉 Nitro/Nuxt 的结构方式，但它确实有效。