如何在VueJS本地环境模拟API返回生产JSON数据进行测试

方案一：用axios拦截器拦截请求（推荐，无需修改业务代码） #

直接在axios层面拦截目标接口的请求，返回你捕获的生产数据，完全不改动原业务逻辑：

1. 保存模拟数据：在项目里新建src/mock/holdings.js，把捕获的JSON转成JS对象存进去（直接复制JSON内容即可，JSON本身就是合法的JS对象格式）：

export const mockHoldings = {
  // 粘贴你从Network面板复制的JSON内容
  // 示例：
  total: 10,
  list: [
    { id: 1, name: "示例数据1" },
    { id: 2, name: "示例数据2" }
  ]
}

2. 添加axios拦截器：在项目入口文件（比如main.js）里配置拦截规则：

import axios from 'axios'
import { mockHoldings } from './mock/holdings.js'
import Vue from 'vue'

// 拦截请求，匹配到目标接口时返回模拟数据
axios.interceptors.request.use(config => {
  if (config.url === '/api/v1/something/endpoint') {
    // 直接返回模拟的响应结构，和真实API返回一致
    return Promise.resolve({
      data: mockHoldings
    })
  }
  return config
})

Vue.prototype.$axios = axios

这样原请求代码不需要任何修改，本地开发时会自动拿到模拟的success.data对象，和生产环境的API返回效果完全一致。

方案二：直接在业务代码里分支处理（快速临时测试） #

通过环境变量判断本地开发环境，跳过真实请求直接赋值模拟数据：

// 原代码修改
const self = this
if (process.env.NODE_ENV === 'development') {
  // 直接赋值生产环境捕获的JS对象
  self.holdings = {
    // 粘贴你的JSON转成的JS对象
  }
  self.searched = true
} else {
  this.$axios
    .get('/api/v1/something/endpoint')
    .then(success => {
      self.holdings = success.data
    })
    .finally(() => {
      self.searched = true
    })
}

这种方法适合临时测试，缺点是需要改动业务代码，上线前要确保不会把模拟代码带到生产环境（不过process.env.NODE_ENV在生产会自动变成production，所以不会有问题）。

方案三：搭建本地Mock服务（模拟真实接口环境） #

用json-server快速搭一个本地接口，完全模拟生产API的请求响应：

1. 安装json-server：

npm install -g json-server

2. 创建Mock数据文件：在项目根目录新建db.json，按如下格式写入你的捕获数据：

{
  "api/v1/something/endpoint": {
    // 粘贴你捕获的JSON内容
  }
}

3. 启动Mock服务：

json-server --watch db.json --port 3001

4. 配置axios baseURL：在main.js里设置开发环境的请求地址指向本地Mock服务：

axios.defaults.baseURL = process.env.NODE_ENV === 'development' 
  ? 'http://localhost:3001' 
  : '' // 生产环境的API地址

这种方案最接近真实接口环境，适合需要测试请求流程、状态码等场景。

为什么直接放JSON字符串不行？ #

因为axios默认会自动把API返回的JSON字符串解析成JS对象，而你直接赋值字符串的话，self.holdings会变成字符串类型，和真实API返回的对象类型不一致，导致后续业务逻辑出错。所以必须使用JS对象格式的模拟数据，或者让Mock服务返回JSON字符串，让axios自动解析成对象。

内容的提问来源于stack exchange，提问作者Matt W