Javascript如何在函数中使用导入的对象？

Question

更新...

我正在尝试在我的 nuxt.config.js 中使用导入的对象 这是 Nuxt.js 配置文件。

我有这个： seo.js

export default {
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/img/favicon.ico',
    },
  ],
  meta: [
    { 
      charset: 'utf-8' 
    }
  ]
}

然后在nuxt.config.js中：

import seo from './seo'

export default {
  head() {
    return {
        ...seo,
    }
  },
  ... other config setting ...
}

然后我收到一个错误：“_seo 未定义” 我不是想将 head 作为函数导出，这是配置文件，还有更多设置。

虽然这可行，但 nuxt.config.js：

import seo from './seo'

export default {
  head: {
        ...seo,
    }
  }
  ... other config settings ...
}

我无法在函数中使用导入的对象。我很困惑，这里有什么问题，我该如何使用那个导入的对象？

Answer 1

将 nuxt.config.js 更改为以下内容

import seo from "./seo";

export const head = () => {
  return {
    ...seo
  };
};

export default head;

我已将它放在代码沙箱中，如果您查看控制台日志，它会输出正确的信息

https://codesandbox.io/s/vigilant-almeida-j8dyq?file=/src/App.js

Answer 2

对于此类导出，建议使用命名导出。

export const links = [
{
  rel: 'icon',
  type: 'image/x-icon',
  href: '/img/favicon.ico',
},

]

并按如下方式导入：

import {seo} from './seo'
export default {
   head: {
    ...seo,
  }

} }

Answer 3

不用将head作为默认对象的方法导出，可以直接默认导出函数

import seo from "./seo";

export default function() {
  return {
    ...seo
  };
};