vue.js中mock本地json数据

新版本的vue项目中已经将dev-server.js，dev-client.js两个js文件合并到了webpack.dev.conf.js文件中，以下分别是新旧版本的build目录结构：
新版本：
旧版本：
本次验证mock：运用vue的脚手架进行了项目的搭建，想要通过json文件模拟后台传输数据，因为之前dev-server中包含 var app = express()，但是新版本的webpack.dev.conf.js 中并没有，我们需要express方法定义路由：我们需要添加代码如下；

//头部添加
const express = require('express')
const app = express()//读取本地json文件并且定义对应参数
var appData = require('../data');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;//通过express定义路由对象
var apiRoutes = express.Router()//在devServer中添加具体路由规则以及返回
before(app) {apiRoutes.get('/seller', function (req, res) {res.json({errno: 0,data: seller});});apiRoutes.get('/goods', function (req, res) {res.json({errno: 0,data: goods});});apiRoutes.get('/ratings', function (req, res) {res.json({errno: 0,data: ratings});});app.use('/api', apiRoutes);}

如上代码都需要添加到 webpack.dev.conf.js 文件中，注意路由规则需要添加到 devServer 中，如下图所有代码位置：
启动项目后，浏览器范问：http://localhost:8080/api/goods#/
补充：
- 发现从老版本中拷贝过来这句代码是多余的：

const app = express()

- 将以上代码注释，并且修改before中的app为任意自定义名称都是可以通过编译并且正常运行，如下：

before(myRout) {apiRoutes.get('/seller', function (req, res) {res.json({errno: 0,data: seller});});
.....myRout.use('/api', apiRoutes);}

具体原因正在探索，还有就是before的作用是什么？？，一定要有这个，还在探索改语法规则
补充二：
- 将before，after修改成beforeEach和afterEach，运行出现如下错误：


Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.- configuration has an unknown property 'beforeEach'. These properties are valid:object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, before?, after?, stats?, reporter?, reportTime?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sell@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sell@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR!     D:\worksoft\nodejs\node_cache\_logs\2021-05-18T02_08_50_682Z-debug.log

可以在以上错误中看到提示：非法的配置对象，webpack-dev-server 初始化的配置对象中没有匹配到这个规则beforeEach，这个配置是非法的。
并且在一下他列举出了所有配置对象，我们可以看到其中就有before，after，接下来我需要做的就是搞清楚这些配置对象的意义：
继续补充：查阅资料后在webpack-dev-server 官网中找到了他所有的操作符的说明，类似一个api文档，在文档说明如下：
- devServer.before：提供了在服务器内部执行自定义中间件的能力。这可用于定义自定义处理程序
- devServer.after：提供在服务器内部所有其他中间件之后执行自定义中间件的能力
如上官网说明，改api是在服务器内部自定义一段我们的逻辑，after与before只是定义执行的先后顺序
以上完成vue-cli利用本地json进行数据mock的整个流程
初学vue，初涉前端相关知识，打算进阶全栈开发，求鼓励