vue2 配置 mock.js 模拟后端数据

安装 mockj

首先确保你有一个 vue 2 项目，如果没有，可以用 Vue CLI 创建一个：

vue create vue-mock-demo

开始安装 Mock.js

npm install mockjs --save-dev

创建 Mock 配置文件

在项目的 src 目录下新建一个文件夹 mock，并在其中创建 index.js 文件，用于编写模拟接口。

例如(src/mock/index.js)：

import Mock from "mockjs";

// 设置延迟响应时间（可选）
Mock.setup({
  timeout: "200-600", // 模拟请求延迟 200ms 至 600ms
});

// 模拟接口返回数据
Mock.mock("/api/user", "get", {
  code: 200,
  message: "success",
  data: {
    "id|1-100": 1, // 生成一个 1 到 100 的随机数
    name: "@cname", // 生成一个中文姓名
    age: "@integer(20, 50)", // 生成 20 至 50 的随机整数
    email: "@email", // 生成随机邮箱
  },
});

Mock.mock("/api/products", "post", {
  code: 200,
  message: "success",
  data: {
    "list|5-10": [
      {
        "id|+1": 1, // 自增 ID
        name: "@ctitle(5, 10)", // 生成 5-10 字的中文标题
        price: "@float(100, 500, 2, 2)", // 生成价格，保留两位小数
      },
    ],
  },
});

// 你可以在这里添加更多 Mock 接口
console.log("Mock server is running...");

// 捕获所有请求 post、get指定
Mock.mock(/.*/, "get", (options) => {
  console.log("Mock intercepted:", options);
  return { code: 200, message: "Mock fallback response" };
});

在项目中引入 Mock 配置

为了让 Mock.js 生效，需要在项目的入口文件中引入 mock/index.js 文件。

修改 main.js , 在 src/main.js 中引入：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 引入 Mock 配置（仅在开发环境中引入）
if (process.env.NODE_ENV === "development") {
  require("./mock");
}

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

这样，Mock 功能只会在开发环境中生效，避免在生产环境中引入模拟数据。

调用接口

`app.vue` 配置如下代码：
<template>
  <div>
    <h1>User Info</h1>
    <div v-if="user">
      <p>ID: {{ user.id }}</p>
      <p>Name: {{ user.name }}</p>
      <p>Age: {{ user.age }}</p>
      <p>Email: {{ user.email }}</p>
    </div>
    <button @click="fetchUser">Fetch User</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      user: null,
    };
  },
  methods: {
    async fetchUser() {
      try {
        const response = await axios.get("/api/user");
        this.user = response.data.data;
      } catch (error) {
        console.error("Error fetching user:", error);
      }
    },
  },
};
</script>

启动项目 npm run dev

打开浏览器，在页面中点击按钮可以看到从 /api/user 获取的模拟数据。

完成安装！！

Mock 配置

如果需要根据环境动态加载不同的 Mock 数据，可以将不同的 Mock 配置文件拆分为多个模块。例如：

• mock/user.js：用户相关数据
• mock/product.js：产品相关数据

然后在 mock/index.js 中统一引入。

import "./user";
import "./product";

development 关闭 mock

根据环境变量判断是否引入 Mock.js。使用 VUE_APP_USE_MOCK 环境变量来控制：

if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_USE_MOCK === 'true') {
  require('./mock'); // 引入 Mock 配置
}

在项目根目录下的 .env.development 文件中，添加以下行以开启 Mock.js：

VUE_APP_USE_MOCK=true

如果需要关闭 Mock.js，只需将其设置为 false。

mock错误排查和解决步骤

1. 确认 Mock 是否生效

在开发模式下，Mock.js 会拦截请求。首先确保 Mock.js 已正确加载并运行：

检查浏览器控制台是否打印了 Mock server is running...（或其他你在 mock/index.js 中定义的日志）。

确保入口文件 main.js 中的 require('./mock') 已被执行。

如果没有看到日志，说明 Mock.js 并未生效，请检查以下内容：

是否正确引入 mock/index.js，路径是否正确。

确保 mock/index.js 在开发环境下加载了。

2. 检查 Axios 的请求路径

Mock.js 默认拦截的是 相对路径 或完全匹配的请求路径。如果你的请求使用了完整的 URL 或者请求未被 Mock 拦截，那么请求会直接发送到实际后端。

Mock.js 的拦截规则：

例如，你在 mock/index.js 中定义了如下 Mock：

Mock.mock("/api/user", "get", { code: 200, message: "success" });

Mock.js 只会拦截 GET 请求到 /api/user 的路径。

排查 Axios 请求路径：

查看你的 axios 请求代码，是否包含了完整的 URL，例如：

axios.get("http://localhost:3000/api/user"); // 这种不会被 Mock.js 拦截

解决方案：将请求改为相对路径：

axios.get("/api/user"); // 这种会被 Mock.js 拦截

如果后端接口域名是必须的，可以使用环境变量区分开发和生产环境。例如，在开发环境中，移除基础 URL：

const instance = axios.create({
  baseURL: process.env.NODE_ENV === "production" ? "http://your-api.com" : "", // 开发环境不加 baseURL
});

3. 确保 Mock.js 拦截功能未被覆盖

Mock.js 拦截请求的方式是通过 拦截 XMLHttpRequest 或 Fetch API 实现的。如果你的项目中有其他代码（例如 axios 配置了自定义的适配器）覆盖了 Mock.js 的拦截功能，Mock 就无法生效。

排查方式：

确认是否在 axios 中配置了自定义适配器：

axios.defaults.adapter = customAdapter; // 如果有这种代码，Mock.js 会失效

检查是否引入了其他拦截器（例如 msw 或其他数据模拟工具），可能会和 Mock.js 冲突。

解决方案：

• 去掉自定义适配器或其他拦截工具。
• 如果必须使用其他工具，考虑将 Mock.js 替换为更灵活的解决方案，例如 msw。

4. 确保请求路径和 Mock.js 拦截的路径匹配

Mock.js 的路径匹配是严格的，以下几点需要注意：

• 请求方法是否匹配：
  
  如果你定义的是 Mock.mock("/api/user", "get", {...})，但你发送的是 POST 请求，Mock.js 不会拦截。

• 请求路径是否完全一致：
  
  比如你定义了 /api/user，但实际请求是 /api/user/ 或 /api/v1/user，Mock.js 不会拦截。

检查方法：

在 Mock.js 中定义一个通用拦截规则来捕获所有请求，并查看是否有未匹配的请求：

Mock.mock(/.*/, "get", (options) => {
  console.log("Mock intercepted:", options);
  return { code: 200, message: "Mock fallback response" };
});

通过这种方式，你可以查看 Mock.js 是否拦截了请求。如果请求没有被拦截，可能是路径或方法不匹配的问题。

5. 确保 Mock.js 只在开发环境中运行

Mock.js 的引入通常只在开发模式下生效。如果你通过 process.env.NODE_ENV 控制 Mock.js 是否加载，确保 NODE_ENV 的值在开发环境中是 "development"：

if (process.env.NODE_ENV === "development") {
  require("./mock");
}

排查方法：

打印环境变量，确保开发环境的值是 development：

console.log("Current NODE_ENV:", process.env.NODE_ENV);

6. 使用 Mock.js 的 xhr 调试功能

Mock.js 提供了一个调试功能，可以帮助排查问题。在浏览器控制台中输入以下代码：

console.log(Mock.XHR.prototype.open.toString());

Mock.js 会打印自己的拦截逻辑。如果你看到的是原生的 XMLHttpRequest.open 方法，说明 Mock.js 的拦截功能没有生效。

7. 检查是否使用了现代 Fetch

Mock.js 默认是拦截 XMLHttpRequest 的请求。如果你使用的是 Fetch API，则需要额外引入 mockjs-fetch 插件来支持拦截 Fetch 请求。

安装 mockjs-fetch：

npm install mockjs-fetch --save-dev

在 mock/index.js 中引入：

require("mockjs-fetch");

Mock.mock("/api/user", "get", { code: 200, message: "success" });

8. 检查是否使用了代理服务器

在开发环境中，有些项目会配置代理转发（例如 vue.config.js 中的 devServer.proxy），导致请求被代理转发到实际后端，而不是被 Mock.js 拦截。

排查方式：

检查 vue.config.js 中是否有类似的配置：

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
      },
    },
  },
};

解决方案：

• 在开发阶段禁用代理，或者将 Mock.js 的路径调整为非代理路径。
• 确保代理只在需要时生效。