如何在 VSCode 中利用 Node.js 环境搭建 Mock Server

在前端开发中，快速搭建一个用于联调或原型验证的 Mock Server，几乎是每个团队都绕不开的日常。如果每次都要从零开始写服务端代码，那效率就太低了。好在社区里有现成的轮子，比如 json-server，几行命令就能搞定。

Mock Server 用 json-server 最快上手

说白了，用 json-server 搭建服务，就是把一个 JSON 文件当作数据库，它会自动帮你生成一套标准的 RESTful 接口。不用写任何后端逻辑，特别适合前端在前期快速验证页面交互。

操作起来也很直接。在项目根目录下执行：

npm init -y && npm install json-server --sa ve-dev

然后创建一个 db.json 文件，里面结构类似这样：

{
  "users": [
    { "id": 1, "name": "Alice", "email": "alice@example.com" }
  ]
}

接着，在 package.json 的 scripts 里加一条命令："mock": "json-server --watch db.json --port 3001"。最后，在 VSCode 的终端中运行 npm run mock，服务就起来了。

最常遇到的坑是什么？启动后访问 http://localhost:3001/users 返回 404。多半是 db.json 文件名写错了、路径不对，或者 JSON 格式有误（比如末尾多了个逗号）。这些小细节，排查时得留意一下。

VSCode 终端默认没激活 Node.js 环境怎么办

如果在终端里输入 npm 提示 “command not found”，不用急着重装 Node.js。这通常意味着 VSCode 没有正确继承系统的环境变量。可以按照下面几个方向排查：

• 先在终端手动输入 which node 和 which npm，看能不能返回具体的安装路径。
• 检查 VSCode 的启动方式。在 macOS 上，如果用桌面图标启动，有时环境变量会不全。推荐在终端里用 code . 命令来打开项目。
• Windows 用户，安装 Node.js 时务必勾选 “Add to PATH”。如果忘了，可以手动把 Node.js 的安装目录（比如 C:Program Filesnodejs）加到系统环境变量里。

改完环境变量，必须重启 VSCode 才能生效——这个步骤很容易被忽略，但很关键。

需要动态响应或自定义路由？换 express + lowdb

json-server 虽然好用，但功能比较基础，不支持中间件或条件逻辑。比如你想根据不同的 query 参数返回不同的数据、模拟网络延迟、或者在 POST 请求后校验字段，它就无能为力了。

这时候就需要自己搭一个轻量级的服务。一个很经典的组合是 express + lowdb。新建一个 mock.js 文件：

const express = require('express');
const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync');
const adapter = new FileSync('db.json');
const db = low(adapter);
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.get('/api/users', (req, res) => {
  const { delay = 0 } = req.query;
  setTimeout(() => res.json(db.get('users').value()), delay);
});
app.listen(3001, () => console.log('Mock server running on http://localhost:3001'));

安装依赖：npm install express lowdb，然后用 node mock.js 启动。这套方案的好处是，lowdb 支持写入操作，express 可以自由地插入中间件，比如加个 CORS 头：app.use((_, res, next) => { res.header('Access-Control-Allow-Origin', '*'); next(); });

VSCode 调试 Mock Server 的坑：热更新别指望 nodemon 自动识别 db.json

用 nodemon mock.js 启动服务时，它默认只监听 .js 文件的变化。也就是说，你修改 db.json 的内容，服务并不会自动重启。必须显式地加上参数：

nodemon --watch mock.js --watch db.json mock.js

或者，更好的方式是写一个 nodemon.json 配置文件来统一管理：

{
  "watch": ["mock.js", "db.json"],
  "ext": "js,json"
}

另一个容易让人困惑的点是调试器。VSCode 的 debugger 默认 attach 到 node 进程，但 nodemon 启动的是子进程。如果想让断点生效，需要用 nodemon --inspect 启动，并在 launch.json 里配置 "attach" 模式。

说到底，搭建一个好用的 Mock Server，不只是把接口跑通那么简单。你还需要考虑接口的行为是否灵活、数据修改后是否需要持久化、以及调试起来是否顺手。很多开发者在联调的中途才发现，当初的决定有点考虑不周。所以，提前把这些因素都纳入规划，能省去不少后续的麻烦。