mock.mock() 不能直接渲染 html 模板，因其仅劫持 xmlhttprequest 返回 json，不解析 html、不操作 dom；需手动用 js 获取数据并更新视图。
Mock.mock() 不适合直接用于 HTML 模板渲染，它只拦截 XHR 请求、不处理 DOM 渲染逻辑；真正在 HTML 中做「模板 + Mock 数据」联动，得靠手动注入或轻量级模板引擎配合。
为什么不能直接用 Mock.mock() 渲染 HTML 模板
Mock.js 的 Mock.mock() 本质是劫持 XMLHttpRequest，只管“请求进来 → 返回 JSON 数据”，它不解析 HTML、不执行模板语法、也不操作 document。你在 <script></script> 里调 Mock.mock('/api/user', { name: '@cname' })，只是告诉 Mock：“等有 GET /api/user 请求时，返回这个数据”——但页面上没发请求，或者用了 fetch，或者压根没写 JS 去取数据，那 HTML 就永远空白。
- 常见错误：把
Mock.mock()当成“自动填充模板”的工具，结果页面加载完啥也没变 - 真实依赖链是：HTML 模板 → JS 发起请求 → Mock 拦截并响应 → JS 处理响应 → 手动更新 DOM
- 如果你用的是纯静态 HTML（无 JS 渲染逻辑），Mock 完全无感知，更不会主动渲染
HTML 页面中实现模板渲染的三种可行路径
要在 HTML 文件里看到 Mock 数据“长出来”，必须补上“数据消费”环节。以下方式按侵入性由低到高排列：
-
最简方案（推荐调试期）：用
fetch或$.get请求 Mock 接口，拿到数据后用innerHTML或textContent填进带id的容器，比如<div id="user-name"></div> -
模板字符串硬编码（仅限极简 demo）：在
<script></script>里用Mock.mock()生成数据，再拼接 HTML 字符串，最后document.getElementById('list').innerHTML = htmlStr——注意 XSS 风险，别直接插用户字段 -
引入微型模板引擎（如 handlebars、mustache）：预定义
<script type="text/x-handlebars-template">{{name}}</script>，用 JS 编译模板 + 注入 Mock 数据，适合多处复用模板结构
fetch + Mock.mock() 组合失败的典型表现
你写了 Mock.mock('/api/user', { name: '张三' })，又写了 fetch('/api/user')，但控制台仍发真实请求、页面没更新——这不是 Mock 失效，而是根本没生效：
-
Mock.js不支持fetch，它只监听XMLHttpRequest实例；你必须改用new XMLHttpRequest()或 jQuery$.ajax() - 如果坚持用
fetch，就得手动覆盖window.fetch，且返回的必须是Response实例，例如：return new Response(JSON.stringify(data), { status: 200, headers: { 'Content-Type': 'application/json' } }) - 路径匹配要严格：Mock 写的是
'/api/user'，但请求发的是'/api/user/'（结尾斜杠）或'http://localhost:8080/api/user'（带协议域名），都会失配
真正能“一键渲染”的替代思路
如果目标是“写个 HTML 文件，打开就看到 Mock 数据渲染好”，绕过请求拦截是最直接的路：
- 放弃
Mock.mock()，改用Mock.mock()生成纯数据对象，然后立刻用 JS 渲染进 DOM（不走网络） - 避免在 HTML 中混写大量 JS 渲染逻辑，可把模板和数据分离：用
<template id="user-tpl"><h2>{{name}}</h2></template>+document.querySelector('#user-tpl').innerHTML.replace('{{name}}', data.name) - 注意浏览器限制：本地双击打开
file://协议的 HTML 时，fetch和XMLHttpRequest默认被 CORS 阻止；此时 Mock 无法触发，只能走纯内存生成 + 同步渲染
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
