[英]TypeError when using Gridsome while building a Vue.js project
I'm using Vue.js
and Gridsome
to create a portfolio for myself.我正在使用
Vue.js
和Gridsome
为自己创建一个投资组合。 However, when I added a JSON file to contain my profile info in the site, I faced an issue.但是,当我在站点中添加一个 JSON 文件以包含我的个人资料信息时,我遇到了一个问题。 This is how I imported the file inside my
Index.vue
component:这就是我在
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>
and here is how I use it:这是我使用它的方式:
<Intro :personal="profile.personal" />
When I run the project in development (command: gridsome develop
), everything is ok and the data is read properly.当我在开发中运行项目时(命令:
gridsome develop
),一切正常并且数据被正确读取。 However, when I want to build the project (command: gridsome build
) which creates a build files in the dist
folder, then this error happens:但是,当我想构建在
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)
this is my project structure(src folder):这是我的项目结构(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
here is my package.json
:这是我的
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"
}
}
I really don't get where the problem is and need help to solve it.我真的不知道问题出在哪里,需要帮助来解决它。 Thanks for your time
谢谢你的时间
From the Gridsome docs :来自Gridsome 文档:
gridsome build uses server-side rendering (SSR) to create a fully rendered page.
gridsome 构建使用服务器端渲染 (SSR) 来创建完全渲染的页面。 If your Vue component does not support SSR... it won't be rendered properly.
如果您的 Vue 组件不支持 SSR……它将无法正确呈现。
we suggest you to encapsulate the component inside
<ClientOnly></ClientOnly>
tags and import the library inside Vue'smounted()
handler.我们建议您将组件封装在
<ClientOnly></ClientOnly>
标记中,并将库导入 Vue 的mounted()
处理程序中。
The error you got is from vue-server-renderer
, which is from Vue's server-side API.您得到的错误来自
vue-server-renderer
,它来自 Vue 的服务器端 API。 You'll need to implement the instructions above.您需要执行上述说明。
Also, without knowing how you've enabled loading JSON as a module (ie ~
) in development, perhaps that's an issue, because that doesn't work in the default Vue CLI environment.此外,在不知道您如何在开发中启用将 JSON 作为模块(即
~
)加载的情况下,这可能是一个问题,因为这在默认的 Vue CLI 环境中不起作用。
Try removing the ~
from all imports:尝试从所有导入中删除
~
:
import profile from "@/data/profile.json";
You have to pass the imported object to vue
as follows:您必须将导入的 object 传递给
vue
,如下所示:
data: () => ({
myProfile:profile
}),
So you can use it as follows:因此,您可以按如下方式使用它:
<Intro :personal="myProfile.personal" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.