网页发布后打不开，首要确认是否真正通过HTTP(S)服务发布，而非仅复制文件；需检查服务启动、域名绑定、MIME配置、路径层级、子目录部署、平台特异性规则、HTTPS混合内容及缓存问题。
网页发布后打不开？先确认是否真“发布了”
很多人以为把 index.html 拖进服务器目录就算发布成功，其实只是文件放上去了——没启动服务、没绑定域名、没配置 MIME 类型，浏览器根本没法正确加载。尤其本地双击打开的 file:// 链接，在上传后必然失效，这不是 bug，是浏览器安全策略。
- 用 Chrome 打开网页时看地址栏：如果是
file:///开头，说明根本没走 HTTP 服务，纯静态文件模式下 AJAX、fetch、import等全会因跨域被拦 - 真正发布必须通过 HTTP(S) 协议访问，比如
http://yourdomain.com/index.html或https://123.45.67.89/~user/ - 本地测试建议直接起个最小服务：
npx serve（需 Node）、python3 -m http.server 8000，而不是双击打开
相对路径在发布后失效的典型表现和修复方式
HTML 中写 <img src="images/logo.png"> 在本地能显示，一上传就 404，大概率是路径层级或部署子目录没对齐。服务器根目录 ≠ 你本地开发根目录。
- 检查浏览器开发者工具（F12）→ Network 标签页，点失效资源，看它实际请求的 URL 是什么，对比你预期的路径
- 如果网站部署在子路径下（如
https://example.com/myapp/），所有相对路径都会相对于该子路径解析，此时images/logo.png实际请求的是/myapp/images/logo.png，而非/images/logo.png - 解决方法：统一用根相对路径（开头加
/），如<img src="/myapp/images/logo.png">；或使用<base href="/myapp/">声明基准 URL - 避免在 JS 里硬编码路径，改用
document.currentScript?.src或new URL('./data.json', import.meta.url)（ESM 环境）动态计算
GitHub Pages / Vercel / Netlify 发布后链接 404 的关键检查点
这些平台自动托管很省事，但默认行为和本地习惯不一致，容易掉坑。
- GitHub Pages 默认只识别
index.html为入口，且若启用 “Enforce HTTPS”，旧的http://链接立刻失效；同时，它不支持客户端路由（SPA）的深层路径，/about会 404，除非配置404.html回退或启用history.pushState兼容方案 - Vercel 默认开启静态优化，但若项目含
index.js同名文件，可能误判为 Serverless Function 而跳过 HTML 服务；检查vercel.json中"rewrites"是否覆盖了正常路径 - Netlify 要注意
_redirects文件或netlify.toml里的重定向规则，一个错位的/* /index.html 200可能让 API 请求也被劫持 - 所有平台都要求最终生成的 HTML 文件可被直接 GET 访问，不能依赖本地构建脚本未运行导致的空
dist/目录
HTTPS 混合内容（Mixed Content）导致资源静默失败
页面用 HTTPS 打开，但 HTML 里写了 <script src="http://cdn.example.com/lib.js"></script>，现代浏览器会直接屏蔽该脚本，控制台只报 “Blocked loading mixed active content”，不报 404，很容易被忽略。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Console，搜关键词
Mixed Content或was loaded over HTTPS - 把所有
http://外链改成https://，或协议相对写法//cdn.example.com/lib.js（但注意：某些 CDN 不支持 HTTP/HTTPS 双协议，仍可能失败） - 检查第三方字体、图片、分析脚本的加载地址，特别是从老模板复制过来的代码
- 用
curl -I https://yoursite.com看响应头是否有Content-Security-Policy: upgrade-insecure-requests，有则强制升级 HTTP 资源，但前提是目标资源真支持 HTTPS
最常被忽略的一点：缓存。你以为改了 HTML，但浏览器或 CDN 仍返回旧版本，导致死活找不到刚加的 <meta name="viewport"> 或新 JS 文件。排查前先清缓存、关预加载、加时间戳参数（script.js?v=1.0.1），再看 Network 里资源的 Response Headers 中 cache-control 和 etag 值。
