配置发布单页面静态站点
单页应用(SPA,如 Vue / React 构建产物)的所有路由都由前端 history 模式处理,需要特殊的回退配置,否则刷新子路由会 404。
1 与多页静态站点的区别
| 类型 | 特点 | 刷新子路由 |
|---|---|---|
| 多页静态站点 | 每个路由对应一个 html 文件 | 正常 |
| 单页应用 | 只有一个 index.html,路由在前端 | 需回退到 index.html |
2 新建单页应用站点
- 新建站点,类型选择 单页应用(SPA);
- 填写域名与本地根目录(指向
dist/或build/产物目录); - 开启 History 回退,让所有未匹配的路径都返回
index.html; - 保存并启动。
3 验证
访问根路径正常,手动刷新 /about、/user/123 等子路由也应能正确加载页面,而不是 404。
如果你的 SPA 使用 Hash 路由(`#/about`),则不需要开启 History 回退,按普通静态站点发布即可。