Twikoo评论系统部署踩坑记录：Vercel域名无法访问的解决之路
- 1导航栏 UI 改造全记录：卡片边框、悬浮胶囊、三段收拢与 PC 收拢态快捷面板（附完整复现指南）
- 2博客性能优化全记录：Lighthouse 报告拆解到帧率根因排查（A–F 六项实战）
- 3Firefly 博客实战：从零搭建任意设备可用的发布台（Vercel + GitHub API）
- 4评论区回复时表情面板被截断：一次 overflow 裁剪排查实录
- 5Firefly 博客实战：给文章页加阅读进度条与圆环百分比
- 6Firefly 博客接入友链朋友圈：从零开始的完整部署教程
- 7从零开始搭建个人图床
- 8文章中添加音乐播放器
- 9基于Firefly主题的列表封面位置改造
- 10基于rehype的博客PDF嵌入组件实现
- 11Twikoo评论系统部署踩坑记录：Vercel域名无法访问的解决之路本文
- 12这是我的第一篇BLOG
Twikoo 评论系统部署踩坑记录：Vercel 域名无法访问的解决之路
给自己留个备忘，也给遇到同样问题的朋友指条路。
起因
博客的主要内容基本完成更换，于是决定完善评论系统。
在本网站项目里其实已经内置好配置文件了，只需修改个人的 envId 即可，最后定了 Twikoo，（最大的原因是免费🤣）并且支持 Vercel 一键部署。
部署过程遇到一些问题，首先浏览器插件建议关闭，或直接更换浏览器，否则在部署的时候相关控件被隐藏导致部署失败。（建议使用 Chrome ）另外官方文档相关内容略微落后实际网页版本，请以实际网页内容为主，并且在保存自己的 envId 信息的时候，建议下载 .env 文件保存，后续可以一键导入。部署操作完成后 Vercel 控制台显示 Ready，以为已经部署成功了。
然后问题来了。
问题一：Vercel 默认域名无法访问
点了 Visit 按钮，浏览器转了半天，给我甩了一句：
无法访问此网站xxxxxxxxx-xxxx-xxxx（你部署后的域名） 的响应时间过长。ERR_CONNECTION_TIMED_OUT连接超时。
第一反应是我哪里配错了。回去检查：
- 部署状态：Ready ✅
- 环境变量（MONGODB_URI / USERNAME / PASSWORD）：都配了 ✅
- 域名配置：Valid Configuration ✅
啥都没问题，但就是打不开。
后来才反应过来——*.vercel.app 这个默认子域名在大陆本身就属于超时状态，而官方文档和相关教程并没有提到这点，最新的教程也只停留在23年。
解决方案：绑定自定义域名
既然默认域名用不了，那就绑定本网站的子域名。
第一步：Verc 添加域名
在 Vercel 项目的 Settings → Domains 里点 Add Existing，输入 twikoo.xxxx（你的域名）。
添加完之后，Vercel 会显示 Invalid Configuration，并告诉你需要配什么 DNS 记录。它自动识别出我的 DNS 是 Cloudflare 管理的，给出了精确的配置：
| 字段 | 值 |
|---|---|
| 类型 | CNAME |
| 名称 | twikoo |
| 目标 | xxxxxx |
| 代理状态 | Disabled |
注意类型一定要填写正确
第二步：Cloudflare 配置 DNS（重点！）
去 Cloudflare 的 DNS 记录页面，点 添加记录：
- 类型选
CNAME - 名称填
twikoo - 目标填 Vercel 给的那串
xxxxx.com地址 - TTL 保持自动
- 代理状态必须选「仅 DNS」（灰色云朵）
这里是最容易踩坑的地方。我博客的主域名和其他子域名都是开着 Cloudflare 代理的（橙色云朵），但 Twikoo 这条必须关代理。
原因是：Vercel 需要通过 DNS 验证域名所有权并签发 SSL 证书，如果开着 Cloudflare 代理，请求会先走到 Cloudflare，Vercel 验证不过去，证书也签不下来。
第三步：等待验证和证书签发
保存 DNS 记录后，回到 Vercel 点 Refresh。
先是 DNS 验证通过（蓝色对勾），然后状态变成 Generating SSL Certificate。等了大概一两分钟，再访问 https://xxxxx.xxxxx.xxxxx，返回：
{"code":100,"message":"Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置","version":"1.7.19"}到这一步就算是成了。
第四步：博客前端配置
最后在博客的 Twikoo 配置里，把 envId 改成自定义域名：
https://xxxxxxx.xxxxx.xxxx原来的 *.vercel.app 地址就可以换掉了。
评论系统首次上线一定要点设置，保存密码，并在配置文件里隐藏设置控件。
总结
如果你也在部署 Twikoo 或者类似的 Vercel 项目，并遇到相关问题，希望这篇能帮你少走点弯路。
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！