javascript - 在构建 Vue.js 项目时使用 Gridsome 时出现 TypeError
问题描述
我正在使用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
:)时,一切正常并且数据被正确读取。但是,当我想构建在文件夹gridsome build
中创建构建文件的项目(命令dist
:)时,会发生此错误:
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"
}
}
我真的不知道问题出在哪里,需要帮助来解决它。谢谢你的时间
解决方案
Gridsome & SSR
来自Gridsome 文档:
gridsome 构建使用服务器端渲染 (SSR) 来创建完全渲染的页面。如果您的 Vue 组件不支持 SSR ......它将无法正确呈现。
我们建议您将组件封装在
<ClientOnly></ClientOnly>
标签内,并在 Vue 的处理程序中导入库mounted()
。
您得到的错误来自vue-server-renderer
,它来自 Vue 的服务器端 API。您需要执行上述说明。
~ 进口
此外,在不知道您如何~
在开发中启用将 JSON 作为模块(即)加载的情况下,这可能是一个问题,因为这在默认的 Vue CLI 环境中不起作用。
尝试~
从所有导入中删除:
import profile from "@/data/profile.json";
推荐阅读
- sql-server-2012 - SQL Server - 动态多列数据透视
- aframe - 为什么 A-frame v 0.7.0 不适用于 https?
- sqlite - Flutter 以异步方式从数据库值中设置颜色
- python - 我可以像这样创建一个 AbstractBaseUser 吗?
- arrays - 无法将字符串铲入Ruby中的新数组
- kubernetes - 如何解决kubernetes中的磁盘压力
- mosaic-decisions - 为 Mosaic Decisions 中的列设置默认值
- android - 在屏幕关闭期间在后台播放视频的音频,android?
- javascript - 单击按钮后将“检查”类添加到上一项
- flutter - 颤动中图像底部的标签(文本)