绑带式启动器问题

问题描述

在遵循官方的 Strapi-gridsome 教程时，尝试从 ID 号创建新页面

重现步骤：

npm: '6.14.9',节点：'14.14.0'， 带'3.5.0'

预期结果：

http://localhost:8080/categories/1 应该显示来自 API 的数据，而是显示 404 页面

实际结果：

运行 gridsome 开发时...

ERROR 编译失败，出现 1 个错误 未找到此依赖项： ..\my-gridsome-site\src\templates\Category.vue 在 ./src/.temp/routes.js

gridsome.server.js

module.exports = function (api) {
  api.loadSource(({ addCollection }) => {
    // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
  })

  api.createPages(async ({ graphql,createPage }) => {
    const { data } = await graphql(`
      {
        allStrapiCategory {
          edges {
            node {
              id
              name
            }
          }
        }
      }
    `);

    const categories = data.allStrapiCategory.edges;

    categories.forEach(category => {
      createPage({
        path: `/categories/${category.node.id}`,component: './src/templates/Category.vue',context: {
          id: category.node.id,},});
    });
  });
};

src\templates\category.vue

<template>
  <Layout>
    <div>
      <h1>{{ $page.category.name }}</h1>
      <ul>
        <li v-for="restaurant in $page.category.restaurants">{{ restaurant.name }}</li>
      </ul>
    </div>
  </Layout>
</template>

<page-query>
  query Category($id: ID!) {
      category: strapiCategory(id: $id) {
        name
        restaurants {
          id
          name
        }
      }
    }
</page-query>

解决方法

我遇到了同样的问题。 我正在运行 yarn develop 并且热重载正在处理数据、布局等的一般播放。但是在编辑 gridsome.server.js 时，这些更改没有反映出来。 这是通过重新启动服务器解决的。现在您将拥有动态页面。