原因是一开始本地mock开发使用的是mockjs2。过程中发现console里面的network是看不到request的，开发的时候挺难受的，请求接口的参数根本看不到。对于query等操作很不方便，于是开始修改项目的mock方法，通过vue-cli3的express服务创建。目录结构在testdata文件夹中，创建对应接口目录的目录├──mock│├──testdata││mock-server.js││utils.js├──config├──public├──src。..├──static.env.mockpackage.json...我通过环境变量和模式来启动本地模拟环境。env.mock和.env.development区分环境，在package.json中添加启动mock的命令："scripts":{"local":"vue-cli-serviceserve--modemock","serve":"vue-cli-serviceserve",...},.env.mockNODE_ENV=mocktransformvue.config。js首先是通过devServer的函数修改devServer:{before:require('./mock/mock-server.js'),port:8080},加载mock-server.js文件constfsbefore=要求（'fs-extra'）constpath=require（'path'）constJSON5=require（'json5'）constMock=require（'mockjs2'）const{delay}=require（'./utils.js'）//接口前缀constdevServerMockUrlMatch=/^\/api\//asyncfunctiongetMockData(dataFilePath,method){constfileJsonPath=`${dataFilePath}.json`constfileMockjsPath=`${dataFilePath}.mockjs.json`constfileRestFulPath=`${dataFilePath}$${method.toLowerCase()}.json`constfileRestFulMockjsPath=`${dataFilePath}$${method.toLowerCase()}.mockjs.json`constfileExist=awaitfs.pathExists(dataFilePath)constfileJsonExist=awaitfs.pathExists(fileJsonPath)constfileMockjsExist=awaitfs.pathExists(fileMockjsPath))constfileRestFulExist=awaitfs.pathExists(fileRestFulPath)constfileRestFulMockjsExist=awaitfs.pathExists(fileRestFulMockjsPath)//首先查找RESTFul.mockjs.json文件if(fileRestFulMockjsExist){returnfs.readFile(fileRestFulMockjsPath(th')json=>JSON.stringify(Mock.mock(JSON5.parse(json))))}//再次查找RESTFul.json数据文件if(fileRestFulExist){returnfs.readFile(fileRestFulPath,'utf8')}//then寻找.mockjs.json后缀的mock数据文件//然后寻找.json后缀的mock数据文件if(fileJsonExist){returnfs.readFile(fileJsonPath,'utf8')}//寻找没有后缀的模拟数据文件if(fileExist){returnfs.readFile(dataFilePath,'utf8')}console.error('--------ERROR------')console.error('尝试了以下可能的mock数据文件，还是没有找到对应的数据')console.error(`1.${fileRestFulPath}`)console.error(`2.${fileRestFulMockjsPath}`)console.error(`3.${fileJsonPath}`)console.error(`4.${fileMockjsExist}`)console.error(`5.${dataFilePath}`)returnPromise.reject(newError('没有找到对应的mock数据文件'))}module.exports=app=>{//只有当环境变量是mock时才会进入if(process.env.NODE_ENV==='mock'){console.info('启用本地模拟数据调试模式...')app.all(devServerMockUrlMatch,async(req,res)=>{const{method,originalUrl}=reqconsole.info(`本地数据请求:[${method}]${originalUrl}`)try{//响应延迟500ms，模拟请求awaitdelay(500)constdataFilePath=originalUrl.replace(devServerMockUrlMa切，`${path.join(process.cwd(),'mock/testdata')}$&`).replace(/\?.*$/,'')letdata=awaitgetMockData(dataFilePath,method)res.append('Access-Control-Allow-Origin',true)try{data=JSON5.parse(data)}catch(e){consterrMsg=`localmockjsondataparseerror(本地测试数据JSON解析错误):${dataFilePath}`thrownewError(`${errMsg}\n${e}`)}res.json(data)}catch(err){console.error(err)res.status(500).send(err.stack)}})}}utils.jsconstchalk=require('chalk')constdelay=function(time){returnnewPromise(resolve=>{setTimeout(()=>{resolve()},time)})}constutils={delay}module.exports=utilsprocess.on('unhandledRejection',reason=>{console.log(chalk.red(reason))console.error(reason.stack)process.exit(1)})启动mock环境后，终于可以愉快的开发mock了。现在我是直接获取请求中的地址，然后从本地文件中查找，所以testdata中的目录可能会因为请求地址比较深，所以会创建多层文件夹，但是有利也有弊。对我来说，如果通过界面看mock数据，只需要按照文件夹搜索即可。感觉比较方便理解。如果还有其他更好的方法，请指教~~文字有限，还望指教。
