Ошибка типа при использовании Gridsome при создании проекта Vue. js - PullRequest
Новая
       52

Ошибка типа при использовании Gridsome при создании проекта Vue. js

1 голос
/ 04 апреля 2020

Я использую 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)

это структура моего проекта (sr c папка): 

├── 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"
  }
}

Я действительно не понимаю, где проблема, и мне нужна помощь для ее решения. Спасибо за ваше время

Ответы [ 2 ]

1 голос
/ 04 апреля 2020

Gridsome & SSR

Из документов Gridsome :

В сборке gridsome используется рендеринг на стороне сервера (SSR) для создания полностью визуализированной страницы. Если ваш Vue компонент не поддерживает SSR ... он не будет правильно отображен.

, мы предлагаем вам инкапсулировать компонент внутри тегов <ClientOnly></ClientOnly> и импортировать библиотеку внутри Vue 's * Обработчик 1011 *.

Полученная ошибка - от vue-server-renderer, от серверного API Vue. Вам нужно будет выполнить приведенные выше инструкции.

~ import

Кроме того, не зная, как вы включили загрузку JSON в качестве модуля (то есть ~) в разработке, возможно Это проблема, потому что она не работает в среде CLI по умолчанию * 1030.

Попробуйте удалить ~ из всех импортов: 

import profile from "@/data/profile.json";
0 голосов
/ 04 апреля 2020

Вы должны передать импортированный объект vue следующим образом: 

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

Таким образом, вы можете использовать его следующим образом: 

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