vercel 可直接部署纯静态产物,需确保 html/css/js 能双击 index.html 正常运行;部署 dist/out 目录、删 node_modules、留空 cli 构建参数;路径用根相对路径;国内访问受限属网络现实。

能直接部署,但必须满足「纯静态产物」这个前提——Vercel 不运行任何服务端逻辑,也不帮你起本地服务器。只要你的 HTML、CSS、JS 文件能双击 index.html 正常打开(不报 404、不卡在 localhost:3000),就大概率可以直接上 Vercel。
确认项目是纯静态产物
很多人部署后页面空白或资源 404,根本原因是本地依赖开发服务器(比如 python -m http.server、vite preview 或 live-server)。Vercel 不会执行这些命令,它只托管你提交的文件。
- 检查根目录是否存在
index.html,且所有资源路径能被浏览器直接解析(比如图片用src="/images/logo.png"而不是src="images/logo.png",避免子路径下相对路径错位) - 如果项目由构建工具生成(如 Vite、Create React App),确保你部署的是
dist/或out/目录下的内容,而不是源码目录 - 删掉项目里的
node_modules和package.json(除非你明确要用 Serverless Function),否则 Vercel 可能误判为需要构建的项目,触发不必要的构建流程
用 CLI 部署时关键参数留空
Vercel CLI 在识别到纯静态结构时会自动跳过构建步骤,但如果你手动填了 Build Command 或 Output Directory,反而可能绕过这个逻辑,导致部署失败或路径错乱。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 执行
vercel --prod后,遇到? Build Command:提示,直接回车(留空) - 遇到
? Output Directory:,也直接回车;只有当你的静态文件不在根目录(比如全在public/下)才填public - 不要新建
vercel.json配置文件来强制指定框架类型——Vercel 对纯 HTML 的自动识别比人工配置更稳
图片/CSS 对齐失效?先查三处硬伤
本地正常、Vercel 上布局崩坏,90% 是 HTML/CSS 写法或路径问题,不是 Vercel 的锅。
-
align属性(如<img align="right">)已废弃,现代浏览器兼容性差,Vercel 的 CDN 边缘节点可能更严格解析,务必改用 CSS:float: right或display: inline-block+vertical-align: middle - 样式写在
<style></style>标签里没问题,但如果你用了构建时自动提取 CSS 的插件(比如某些 HTML 压缩工具),可能把<style></style>清掉了——部署前用浏览器打开本地index.html,右键「查看页面源代码」,确认<style></style>还在 - 路径别用
./或../,尤其当页面不止一个(如/blog/index.html)时,相对路径会相对于当前 URL 解析;统一改用根相对路径:href="/css/style.css"、src="/js/main.js"
国内访问不到?这不是部署问题,是网络现实
xxx.vercel.app 域名在国内多数宽带和移动网络下无法直连,这是已知事实,不是你操作错了。Vercel 官方未在中国大陆设边缘节点,也没有合规的 ICP 备案机制。
- 自定义域名(如
example.com)可以缓解,但前提是你的域名已完成 DNS 解析且证书签发成功(Vercel 会自动处理 HTTPS) - 若必须用
.vercel.app,建议在 README 或部署页加一行提示:“国内用户请使用代理访问”,避免用户以为部署失败 - 真正要面向国内用户长期提供服务,得换备案过的平台(如腾讯云静态网站托管、又拍云)或加一层反向代理(成本和运维复杂度上升)
最易被忽略的一点:Vercel 每次部署都会生成新链接,旧链接不会自动跳转。如果你发出去的分享链接是上一版的,而新版改了资源路径或路由逻辑,用户点开就是 404——部署后务必用新生成的 URL 测试完整流程,别依赖记忆里的旧地址。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










