，实现前后端开发分离，已经成为大势所趋。基本上大部分公司的开发模式都是一样的，那么如何在本地实现一个datamock呢？当然你也可以使用在线的工具，比如easymock，也可以实现mock数据，但是如果要稳定，还是要搭建本地环境。下面我要介绍的是利用vue-cli本身自带的函数来实现mock数据。初始化项目（1）使用vue-cli初始化vuecreatemock-demo，使用默认的。(2)创建配置文件在项目根目录下创建vue.config.js配置文件。内容如下：constbodyParser=require("body-parser");constisProduction=process.env.NODE_ENV==="production";letfeMock;if(!isProduction){feMock=require("./mockApi");}module.exports={publicPath:isProduction?"././":"",pages:{index:{entry:"src/main.js",template:"public/index.html",filename:"index.html"}},devServer:{before:app=>{//关键代码app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:true}));如果(!isProduction){feMock(app);}}}};这里主要使用了webpack-dev-server实现的mock功能。要实现接口请求，当然需要提前安装axios和body-parser。npmiaxiosbody-parser-SWritemockAPI(1)在项目根目录新建文件夹mockApi，新建index.jsconstfeMock=app=>{app.get("/mock/api/news",function(req,res){res.json({name:"tom"});});};module.exports=feMock;(2)在src目录下新建api文件夹，新建文件index.jsconstprefix="/mock";exportdefault{methods:{_testMock(){returnthis.$http.get(`${prefix}/api/新闻`);}}};这里的请求路径必须和上一步mock数据的路径保持一致。后台写好接口后，统一修改这个文件中的前缀接口。组件使用（1）在App.vue中使用正常启动项目后，可以在浏览器网络中看到请求，初始功能就实现了。优化（1）项目多人写多个mock文件怎么办？(2)能否直接扫描特定目录加载mock文件？可不可以有一个统一的外部入口，大家只需要写自己的mock文件，不用修改出口呢？解决方法（1）在mockApi文件夹下新建一个mockList文件夹，然后把大家的mock接口写在这里。示例如下：在mockList中新建一个test.jsfunctiontestMock(app){app.get("/mock/api/news",function(req,res){res.json({name:"tom"});});}functiontestPostMock(app){app.post("/mock/api/news",function(req,res){console.log(req.body);setTimeout(function(){res.json({代码:0,数据:"成功",desc:""});},500);});}module.exports=[testMock,testPostMock];创建一个新的test1.jsfunctiontestMock1(app){app.get("/mock/api/news1",function(req,res){res.json({name:"jack"});});}module.exports=[testMock1];(2)修改mockApi/index.js文件constfs=require("fs");常量路径=__dirname;constfiles=fs.readdirSync(path+"/mockList");常量模拟列表=[];files.forEach(function(filename){letmodel=require(path+"/mockList/"+filename);mockList.push(...model);});functionhandleMock(app){mockList.forEach(func=>{func(app);});}module.exports=handleMock;importfs，自动读取设置的目录文件，此配置完成后，其他人只需编写自己的mock接口即可，无需修改此外部文件，完美解决示例代码目录结构如下：
