HTML文件在前后端分离架构中是纯静态资源，由前端构建产出并直接交付浏览器，后端仅提供JSON接口，双方通过OpenAPI等契约协作而非模板嵌入；关键对齐点仅为API地址前缀和认证凭证传递方式。
前后端分离架构下，HTML 文件不再由后端模板引擎渲染，也不再嵌入服务端逻辑——它就是纯静态资源，交付给浏览器直接加载或由前端框架接管。所谓“HTML模板交付”，本质是前端产出可部署的 index.html 及配套资源，后端只提供 JSON 接口，双方通过契约协作，而非文件交接。
HTML 文件不再交给后端套模板
传统模式里，前端把 user-list.html 交给后端，后者用 Thymeleaf 或 JSP 填充 ${users} 变量；分离后这个动作彻底消失。前端自己用 JS（比如 Vue 的 v-for）或框架的 SSR 能力渲染数据，index.html 通常只保留一个空容器节点（如 ）和资源引用。
常见错误现象：
- 前端仍写含服务端变量的 HTML（如
{{name}}未加 JS 框架上下文），导致页面白屏或报错 - 后端在 Nginx 配置中错误地将
/api/*和静态路径混配，导致 HTML 被当作接口返回 404 - 前端构建产物（如
dist/）没清理干净就部署，残留旧版index.html引用已删除的 JS chunk
前后端如何约定 HTML 入口与资源路径
关键不是“谁写 HTML”，而是“谁控制它的加载路径和资源引用”。前端构建工具（如 Webpack/Vite）输出的 index.html 必须满足后端部署环境要求：
- JS/CSS 资源路径应为相对路径（
./js/app.abc123.js）或带版本哈希的绝对路径，避免硬编码域名 - 后端 Nginx 配置需区分静态资源与 API：所有非
/api/、/auth/等前缀的请求，最终 fallback 到index.html（支持前端路由 history 模式）
示例 Nginx 配置片段：
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend:8080;
}
Mock 数据阶段 HTML 如何验证接口契约
在后端接口未就绪时，前端不能等——但也不能随意写死假数据。正确做法是让 index.html 加载的 JS 代码对接口调用做抽象，再通过构建时变量或运行时配置切换数据源：
- 使用
fetch('/api/users')而非fetch('http://localhost:8080/api/users')，靠代理或环境变量注入 base URL - 开发时 webpack-dev-server 配置
proxy将/api请求转发到 mock 服务（如 Mock.js 或 MSW） - HTML 中不写任何 mock 逻辑，所有数据获取收口在 JS 层；mock 返回结构必须严格匹配后端承诺的 JSON Schema（字段名、类型、嵌套层级）
否则联调时会发现：data.userList 在 mock 里是数组，后端实际返回的是 data.list 对象——这种不一致必须在 HTML + JS 加载初期就暴露，而不是等到页面渲染报错。
部署时 HTML 与后端服务的耦合点只有两个
整个分离架构里，HTML 和后端真正需要对齐的，仅剩两处：
- API 地址前缀（
/api还是/v1？是否带版本号？是否走网关？）——这个必须写进前端环境变量（如VUE_APP_API_BASE），不能写死在 HTML 里 - 认证凭证传递方式（
Authorizationheader？还是 cookie？cookie 是否带SameSite和Secure标志？）——这直接影响 fetch 是否携带凭据，也影响 Nginx 是否透传 cookie
其余所有内容（页面结构、样式、交互逻辑、路由跳转）都由前端全权负责。最容易被忽略的是：后端返回的 HTTP 状态码（如 401）是否触发前端统一登录跳转——这个逻辑必须在 JS 层实现，HTML 本身不参与状态判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
