遵循Strapi-Gridsome官方教程时，通过ID创建页面出现404及编译依赖缺失错误

我刚踩过这个坑！咱们一步步来解决：

1. 核心问题：文件名大小写不匹配 #

看报错信息里找的是 ../my-gridsome-site/src/templates/Category.vue，但你的实际文件是 src/templates/category.vue（小写的c开头）。Gridsome的组件路径解析是区分大小写的，哪怕你的Windows系统不区分文件大小写，编译时也会因为路径不匹配直接报错，导致页面生成失败，自然访问时就跳404了。

修复方案二选一： #

• 把你的模板文件名改成 Category.vue（和代码里引用的路径一致）；
• 或者修改 gridsome.server.js 里的组件路径，改成和实际文件名匹配的小写：

  createPage({
    path: `/categories/${category.node.id}`,
    component: './src/templates/category.vue', // 这里改成小写c
    context: {
      id: category.node.id,
    },
  });
  

2. 额外检查项（避免后续踩坑） #

确认模板文件位置 #

确保 category.vue（或Category.vue）确实在 src/templates/ 目录下，别不小心放到 src/components/ 或者其他子目录里了。

验证GraphQL查询有效性 #

等组件路径修复后，如果还是访问不了页面，可以先去Gridsome的GraphQL playground（http://localhost:8080/___explore）测试你的查询：

query Category($id: ID!) {
  category: strapiCategory(id: $id) {
    name
    restaurants {
      id
      name
    }
  }
}

把$id替换成你实际的分类ID（比如1），看看能不能正常返回数据。如果查询没结果，那可能是Strapi那边的数据没同步或者查询字段有误。

最后一步 #

修改完后记得重启 gridsome develop 命令，有时候缓存会导致编译不生效。

内容的提问来源于stack exchange，提问作者Peterpan