javascript - 无法读取未定义的属性 '$options' 为头选项制作外部 js 文件

Question

我需要在 Nuxt 中为我的应用程序设置全局头，一些子页面会覆盖它。那些全局头需要包含翻译的数据。
我创建了 seoHead.js带有代码的文件:

import Vue from "vue";

export const $t = (sign) => Vue.prototype.$nuxt.$options.i18n.t(sign);

export default {
  title: $t("seoGlobal.title"),
  meta: [
    { charset: "utf-8" },
    { name: "viewport", content: "width=device-width, initial-scale=1" },
    {
      hid: "description",
      name: "description",
      content: $t("seoGlobal.description"),
    },
    {
      hid: "ogSiteName",
      name: "og:site_name",
      content: "Test Page",
    },
    {
      hid: "ogTitle",
      name: "og:title",
      content: $t("seoGlobal.ogTitle"),
    },
    (...)
  ],
};

我在我的 index.vue 中导入并使用这些数据和其他这样的页面:

import seoHead from "~/constants/seoHead";

export default {
  head() {
    const metaI18n = this.$nuxtI18nSeo();
    const currentPath = process.env.LP_URL + this.$router.currentRoute.fullPath;
    return {
      ...seoHead,
      meta: [
        {
          hid: "ogLocale",
          name: "og:locale",
          content: metaI18n.meta[0].content,
        },
        {
          hid: "ogLocaleAlternate",
          name: "og:locale:alternate",
          content: metaI18n.meta[1].content,
        },
        {
          hid: "ogUrl",
          name: "og:url",
          content: currentPath,
        },
      ],
    };
  },
(...)

不幸的是，我面临着 Cannot read property '$options' of undefined错误。这对我来说很奇怪，因为我已经使用了 export const $t = (sign) => Vue.prototype.$nuxt.$options.i18n.t(sign);另一个js文件中的代码。有谁知道为什么会出现这个错误？您知道翻译全局头部选项的最佳方式吗？

Answer 1

正如评论中所讨论的，Nuxt 生命周期和您的组件似乎存在时间问题:当时您的组件 seoHead.js已导入，Nuxt 尚未注入(inject)其$nuxt对象进入 Vue .因此，一个简单的解决方法是延迟您的 $t 的执行。函数(访问 $nuxt ):

更改您的组件以导出返回对象的函数，而不是直接导出对象:

export default function() {
  return {
    title: $t("seoGlobal.title"),
    // ...
  }
}

在 index.vue ，更改您的head调用函数seoHead传播时:

return {
  ...seoHead(),
  // ...

这样，访问 $nuxt的代码稍后执行 -- 不是在 seoHead 时执行被导入，但仅当 head功能被执行。此时，Nuxt 生命周期有望完成启动工作，所需对象已到位。

正如我所说，这只是一种解决方法；如果您要调用 head立即在 index.vue ，会出现同样的错误。因此，除非您找到一种合适的方法来集成到 Nuxt 生命周期中，否则我建议您也为您的翻译功能提供保障:

const $t = (sign) => Vue.prototype.$nuxt 
  ? Vue.prototype.$nuxt.$options.i18n.t(sign)
  : sign

如果所需的基础设施尚未到位，这将返回 i18n key 。不是很好，但比异常(exception)更好；)
或者，您可以直接导入您的 i18n 功能，而无需通过 Nuxt；这样你就不会对基础设施有任何依赖——好多了。