【问题标题】：TypeError when using Gridsome while building a Vue.js project在构建 Vue.js 项目时使用 Gridsome 时出现 TypeError
【发布时间】：2020-04-04 12:45:33
【问题描述】：

我正在使用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" />

当我在开发中运行项目时（命令：gridsome develop），一切正常，数据读取正确。但是，当我要构建在dist 文件夹中创建构建文件的项目（命令：gridsome build）时，会发生此错误：

Initializing plugins...
Load sources - 0.04s
Create GraphQL schema - 0.05s
Create pages and templates - 0.03s
Generate temporary code - 0.03s
Bootstrap finish - 0.67s
Compile assets - 13.28s
Execute GraphQL (6 queries) - 0.03s
Write out page data (6 files) - 0s
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)

这是我的项目结构（src 文件夹）：

├── components
│   ├── Intro.vue
│   └── README.md
├── data
│   └── profile.json
├── favicon.png
├── layouts
│   ├── Default.vue
│   └── README.md
├── main.js
├── pages
│   ├── About.vue
│   ├── Index.vue
│   └── README.md
├── templates
│   ├── README.md
│   └── Work.vue
└── vendor
    └── bootstrap.min.css

这是我的package.json：

{
  "name": "portfolio.farzinnasiri.com",
  "version": "0.0.2",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.5.0",
    "gridsome": "^0.7.0"
  }
}

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

【问题讨论】：

标签： javascript vue.js webpack vuejs2 gridsome

【解决方案1】：

Gridsome 和 SSR

来自Gridsome docs：

gridsome 构建使用服务器端渲染 (SSR) 来创建完全渲染的页面。如果你的 Vue 组件不支持 SSR ......它将无法正确呈现。

我们建议您将组件封装在 <ClientOnly></ClientOnly> 标签内，并在 Vue 的 mounted() 处理程序中导入库。

您收到的错误来自vue-server-renderer，它来自 Vue 的服务器端 API。您需要执行上述说明。

~导入

此外，在不知道您如何在开发中启用将 JSON 作为模块加载（即~）的情况下，这可能是个问题，因为这在默认的 Vue CLI 环境中不起作用。

尝试从所有导入中删除 ~：

import profile from "@/data/profile.json";

【讨论】：

我是 js 新手，我认为我没有启用任何将 json 作为模块加载的功能。在开发模式下一切都很好。我也将~ 更改为..（将我的项目结构添加到问题中）但没有变化。在开发模式下一切都很好，但构建过程失败并出现该错误
好的，看来您的路径也不正确。我编辑了答案以说明新的路径信息。
不幸的是，这可能是一个 Gridsome 问题，因为它在典型的 Vue 环境中无法重现。 @ 符号是 src 目录的 Webpack 特殊别名，您的结构显示它是正确的路径。 ~ 在典型的 Vue CLI 安装中不起作用。我会看看 Gridsome 文档。
您是否也从Intro.vue 中删除了~？我会从您的项目中删除所有~ 并尝试重建。请改用@ 并确保所有路径都正确。
我的项目在这里：github.com/farzinnasiri/developers-portfolio/tree/json.

【解决方案2】：

您必须将导入的对象传递给vue，如下所示：

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

所以你可以这样使用它：

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

【讨论】：