[在构建vue.js项目时使用json时发生TypeError

Question

我正在使用vue.js和gridsome为自己创建一个投资组合。但是，当我在站点中添加一个json文件以包含我的个人资料信息时，我遇到了一个问题。这就是我在Index.vue组件中导入文件的方式：

<script>
import Intro from "~/components/Intro.vue";
import profile from "~/data/profile.json";

export default {
  components: {
    Intro,
  },
  metaInfo: {
    title: "Farzin Nasiri",
  },
  data: () => ({
    profile
  }),
};
</script>

这是我的用法：

<Intro :personal="profile.personal" />

当以开发模式运行项目时（命令：'grdisomedevelop) every thing is ok and the data is read properly. How ever when I want to build the project (command:'gridsome build') which creates a build files in thedist`文件夹，则发生此错误：

Could not generate HTML for "/":
TypeError: Cannot read property '__esModule' of undefined
    at i (/home/farzin/MyProjects/portfolio.farzinnasiri.com/node_modules/vue-server-renderer/build.prod.js:1:68670)

我真的不知道问题出在哪里，需要帮助来解决。谢谢您的时间

Answer 1

data应该是function且是returns的object。但是在这里您没有从data返回任何内容。

您的代码应为，

data: () => {
    return {
      profile
    }
  },