用途:为 Kuroco HeadlessCMS 项目提供前端集成方案,覆盖 Vite + Vue 3、Nuxt.js 2/3、Next.js 13+(App Router 与 Pages Router)等框架,并指导发布目标选择与部署。
主要能力:
- 发布目标决策:默认使用 KurocoFront(静态托管 + CDN)。需要 SSR/ISR 时因 KurocoFront 无法执行服务端代码,建议改用 Vercel 等;但先按动机判断——搜索流入与各页 OGP 用 SSG 即可,页面过多或更新频繁才需 SSR/ISR,会员制页面用 SPA。
- 框架支持:Vite + Vue 3 用 vite build 输出 dist/;Nuxt 3/2 用 nuxt generate(SSG),nuxt build 的 SSR 不可用;Next.js 需在 next.config.js 设 output: 'export' 并部署 out/。Next.js 静态导出下 cookies()、Server Actions、Rewrites/Redirects/Headers、ISR、Draft Mode 等不可用,需改用客户端调用 Kuroco API 或 kuroco_front.json 配置。
- 认证实现:提供 login、logout、profile、member/insert 等 fetch 示例,使用 credentials: 'include'。API 侧需在管理画面设置 Cookie 认证与 CORS(CORS_ALLOW_ORIGINS、CORS_ALLOW_CREDENTIALS、CORS_ALLOW_METHODS)。
- KurocoFront 集成:SPA 需在 kuroco_front.json 的 rewrites 中配置 {"source": ".", "destination": "/index.html"},source 固定为 .,不可自行排除 /assets/ 等,否则 JS/CSS 会被替换为 index.html 导致白屏。支持 rewrites/redirects、Basic 认证、IP 限制、GitHub 部署及 Admin MCP 直接部署。
- 注意事项:跨域 Cookie 受 Safari ITP 限制,可将前后端置于同一父域,或改用动态访问令牌(X-RCMS-API-ACCESS-TOKEN 请求头);使用 v-html 或 dangerouslySetInnerHTML 时需用 DOMPurify 等做 HTML 净化。
使用方式:按所选发布目标阅读对应 reference(KurocoFront 用 references/kuroco-front.md,其他用 references/other-hosting.md);框架细节见 references/nuxt.md、references/nextjs.md。Admin MCP 部署时注意 zip 以构建输出内容为根、accepted 仅表示入队、需用 kuroco_front-history 与响应头 x-rcms-hash/x-rcms-deploy 确认。
限制:KurocoFront 不支持服务端执行;Next.js 静态导出功能受限;Safari 下同父域 Cookie 有效期约 7 天。具体收费、价格与平台细节资料未提供。