vue vue-cli的同源环境下的mock数据，无需下载其他依赖，使用node和express_vue项目中mock文件放到和nodemodules同级-优快云博客

本文介绍如何在Vue项目中集成Mock数据，通过修改webpack配置，使用node和express实现本地数据模拟，适用于前后端分离的开发场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工具：node，express

vue正常而言脚手架搭建的前端项目会包含这两个依赖，以vue-cli搭建的项目为例：

1.修改webpack在dev开发模式下的devServer(没有after的话就自己加)

`devServer.after`

function (app, server)

在服务内部的所有其他中间件之后，提供执行自定义中间件的功能。

const apiMock = require('./apiMock')


devServer: {
   after: apiMock('../mock')
}

a、在同级目录（build）下新建一个apiMock.js文件（编写读取本地文件的node代码）

b、在根目录下新建mock文件夹：用来存放我们的mock数据 .json等不同格式的文件

2. 编写apiMock.js文件的代码

使用的技术是node.js中的path、express中的路由功能

下面的dir的值就是

after: apiMock('../mock')中'的../mock'，它指的是一个相对路径，指向用来存放mock数据的那个文件夹

app.use()的用法请参考express 的app.use()用法，不过我这么写大概才猜到应该怎么写了吧

const path = require('path');
module.exports = dir => {
  let apiDir = path.join(__dirname, dir);
  return (app) => {
    const handler = (dirSplit) => {
      return (req, res, next) => {
        res.header('Access-Control-Allow-Origin', '*');
          let queryStr = req.originalUrl.split(dirSplit);
          let fileNameStr = queryStr.length === 2 ? queryStr[1].split('?')[0] : '';
          if (fileNameStr) {
            let fileDir = path.join(apiDir, dirSplit, fileNameStr + '.json');
            setTimeout(() => {
              res.sendFile(fileDir, function (err) {
                if (err) {
                  res.status(err.status).end();
                }
              });
            }, 1000);
          }
      }
    }
    app.use('/customer/*', handler('/customer/'))
    app.use('/addressSet/*', handler('/addressSet/'))
    app.use('/log/*', handler('/log/'))
  }
}

3. 来看看mock文件夹