企业官网建设流程全解析

前端项目使用静态预渲染后，构建目录通常会生成类似结构：
dist/
index.html
about/
index.html
faq/
index.html
posts/
article-a/
index.html
按预期访问 /about 时，服务器应返回 /about/index.html；访问 /faq 时，应返回 /faq/index.html。
但实际部署后经常出现一种现象：浏览器访问子路径能看到正确页面，查看页面源代码却发现 title、canonical、正文都来自首页。
这通常不是前端路由写错，而是静态目录索引与 SPA fallback 的优先级发生了冲突。
一、问题是如何出现的
单页应用为了支持前端路由，常配置一个 fallback 规则：
所有未匹配的请求都返回 /index.html。
这个规则可以避免用户直接访问 /about 时得到 404。但当项目已经生成 /about/index.html、/faq/index.html 等预渲染产物后，如果 fallback 规则优先级过高，所有子路由都会直接拿到根目录入口。
浏览器执行 JavaScript 后，前端路由会根据当前地址渲染正确页面，所以用户感觉一切正常。
但服务器首次返回的 HTML 仍然是首页模板。
这会导致：
子页面初始 title 是首页标题。
子页面 canonical 指向首页。
首次 HTML 没有当前页面 H1 和正文。
页面级 JSON-LD 缺失或仍然是首页数据。
部分抓取工具和预览工具无法读取子页面信息。
二、如何确认是否存在路由回退问题
不要只打开浏览器看页面最终效果，应直接查看首次响应。
可以使用 curl：
curl -L https://example.com/faq
然后检查 H1：
curl -L https://example.com/faq | grep -i “<h1”
检查 canonical：
curl -L https://example.com/faq | grep -i “canonical”
检查 title：
curl -L https://example.com/faq | grep -i “