tm-mock-server

tm-mock-server

一个简单快速的本地静态服务器和 Mock API 服务工具，支持多 HTTP 方法、代理转发等功能。

快速开始

安装

npm i -g tm-mock-server

最简单的使用

# 进入你的项目目录
cd /path/to/your/project

# 启动服务器（默认端口 8000，自动打开浏览器）
tms

访问 http://localhost:8000 即可查看你的静态文件。

核心功能

1. 静态文件服务器

将任意目录作为静态服务器，支持目录浏览和文件访问。

示例：

# 指定目录启动
tms -d ./dist

# 指定端口
tms -p 3000

# 不自动打开浏览器
tms -s

# 显示请求日志
tms -l

2. Mock API 服务

在项目目录下创建 api 文件夹（可通过 -a 参数自定义），即可提供 Mock API 服务。

基础用法

文件结构：

project/
  ├── api/
  │   └── user.json
  └── index.html

user.json 内容：

{
  "data": {
    "id": 1,
    "name": "张三",
    "email": "[e-mail]"
  },
  "code": 200
}

访问：

// GET /api/user
fetch('http://localhost:8000/api/user')
  .then(res => res.json())
  .then(data => console.log(data));

多 HTTP 方法支持

支持为不同的 HTTP 方法返回不同的 Mock 数据。

文件命名规则：

• {serviceName}.{method}.json - 特定方法的 Mock 数据（优先级高）
• {serviceName}.json - 默认文件，所有方法可用（向后兼容）

支持的方法：

• GET → .get.json
• POST → .post.json
• PUT → .put.json
• DELETE → .delete.json
• PATCH → .patch.json
• OPTIONS → .options.json

示例：

文件结构：

api/
  ├── user.get.json      # GET /api/user
  ├── user.post.json     # POST /api/user
  ├── user.put.json      # PUT /api/user
  └── user.delete.json   # DELETE /api/user

user.get.json：

{
  "data": {
    "id": 1,
    "name": "张三",
    "method": "GET"
  },
  "code": 200
}

user.post.json：

{
  "data": {
    "id": 2,
    "name": "新用户",
    "method": "POST"
  },
  "code": 200
}

使用示例：

// GET 请求 - 返回 user.get.json
fetch('http://localhost:8000/api/user', { method: 'GET' })

// POST 请求 - 返回 user.post.json
fetch('http://localhost:8000/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: '新用户' })
})

// PUT 请求 - 返回 user.put.json
fetch('http://localhost:8000/api/user', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: 1, name: '更新用户' })
})

// DELETE 请求 - 返回 user.delete.json
fetch('http://localhost:8000/api/user', { method: 'DELETE' })

嵌套目录支持

支持在 api 目录下创建子目录组织 Mock 数据。

文件结构：

api/
  ├── user.json
  └── test/
      └── db.json

访问：

• /api/user → api/user.json
• /api/test/db → api/test/db.json

3. 代理服务器

支持将请求代理到其他服务器，解决跨域问题。

简单代理（URL 模式）

# 将所有请求代理到目标服务器
tms -x http://api.example.com

配置文件模式

支持使用 webpack-dev-server 风格的代理配置。

创建 proxy.config.js：

module.exports = {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

启动：

tms -x ./proxy.config.js

命令行参数

参数	简写	说明	默认值
--help	-	显示帮助信息	-
--port	-p	指定端口号	8000
--hostname	-h	指定主机名	自动获取本机 IP
--dir	-d	指定静态文件目录	当前目录
--api	-a	指定 API Mock 目录	api
--proxy	-x	代理配置（URL 或配置文件路径）	-
--silent	-s	不自动打开浏览器	false
--log	-l	显示请求日志	false

使用场景示例

场景 1：前端开发本地调试

# 启动静态服务器，查看 HTML/CSS/JS 文件
tms -d ./dist -l

场景 2：Mock API 开发

# 使用示例目录启动，查看 Mock API 效果
tms -d ./example -a api -l

测试不同方法的 API：

# GET 请求
curl http://localhost:8000/api/user

# POST 请求
curl -X POST http://localhost:8000/api/user \
  -H "Content-Type: application/json" \
  -d '{"name": "测试用户"}'

场景 3：解决跨域问题

# 将 /api 请求代理到后端服务器
tms -x http://localhost:8080 -l

场景 4：多项目切换

# 项目 A
tms -d ./project-a -p 8000

# 项目 B（新终端）
tms -d ./project-b -p 8001

场景 5：完整配置示例

# 指定目录、端口、API 目录，显示日志，不自动打开浏览器
tms -d ./example -p 8989 -a api -l -s

环境要求

• Node.js >= 14.0.0

注意事项

• 向后兼容：原有的 .json 文件无需修改，所有 HTTP 方法都可以使用
• 文件查找优先级：
  • 优先查找带方法后缀的文件（如：user.post.json）
  • 如果不存在，回退到默认文件（如：user.json）
  • 如果都不存在，返回文件不存在错误
• API 目录：默认使用 api 目录，可通过 -a 参数自定义

许可证

MIT