prismic-link组件无法为Vue Router生成href属性问题求助

安全阿岳

2026-9-29

问题排查&解决步骤

调整prismic.js配置结构
你当前使用的@prismicio/vue v4及以上版本，routes配置不需要嵌套在defaultParams字段下，直接放在clientConfig根层级即可，修改后的配置如下：
```
import { createPrismic } from "@prismicio/vue";

const prismic = createPrismic({
  endpoint: "mybestrecipes",
  clientConfig: {
    routes: [
      { type: "home", path: "/" },
      { type: "recipe", path: "/recipe/:uid" },
    ],
  },
});

export default prismic;
```
配置修改后重启开发服务，即可看到请求自动携带routes查询参数，接口返回的文档url字段会自动填充对应路径。你之前添加的runtimeCompiler: true配置与该问题无关，不影响修复结果，可按需保留或删除。
校验Prismic自定义类型ID
登录Prismic后台，确认食谱类型的自定义类型API ID与配置中type字段完全匹配，必须为小写的recipe，如果后台配置的是复数recipes，需要同步修改配置中的type值和对应路径。
确认查询调用的Client实例
组件中调用查询接口时，必须使用Vue实例注入的Prismic Client实例，不要手动初始化新的Client对象，手动初始化的实例不会继承全局配置的routes参数。
克隆代码本地运行异常的原因
Lucie的公开代码仓库中默认配置的是她个人的Prismic接口地址，如果本地运行时你替换成了自己的Prismic endpoint，需要同步检查自己的后台自定义类型配置和代码中的routes配置是否匹配，她的线上演示站使用的是自有后台，配置完全对齐因此可以正常运行。