早期Vue构建工程文件在build中包含dev-server.js，后来构建去掉了这个文件，集成到webpack.dev中webpack中的.conf.js。在项目生产过程中，作为前端，不能一直调用后端接口，需要模拟本地访问，所以总结一下模拟中的坑访问，希望对大家有所帮助。1、打开build下的webpack.dev.conf.js文件进行配置。话不多说，直接上代码：代码为：varglob=require('glob');constexpress=require('express')constapp=express()varapiRoutes=express.Router()varappData=require('../data/config')vargetApi=appData['get'];//全部getrequestsvarpostApi=appData['post'];//所有post请求//查找所有json文件varentryJS={};entryJS=glob.sync('./data/**/*.json').reduce(function(prev,curr){prev[curr.slice(7)]='.'+curr;returnprev;},{});//将所有json文件合并为一个jsonletjsonData={};for(entryJS中的vari){letdata=require(entryJS[i]);jsonData=Object.assign(jsonData,data);}app.use('/',apiRoutes)以上是第一个配置，具体参考什么，大家可以自行下载。2、还是在上面的文件中找到devServer对象。在其watchOptions下方添加以下代码：代码为：before(app){//getfor(vari=0;i{console.log(res.data)}).catch((err)=>{console.error(err)})}一切正常，祝开发顺利。其实之前还有个坑，就是新版本引入了.css文件的错误，老提示找不到postcss，如图Failedtocompile../node_modules/css-loader?{“sourceMap”:false}!./node_modules/postcss-loader/lib?{“sourceMap”:false}!./node_modules/element-ui/lib/theme-chalk/index.cssModule构建失败：错误：否PostCSSConfigfoundin:/Users/liliang/workspace/zyb/teacher-ui-basic/node_modules/element-ui/lib/theme-chalkatError(native)at/Users/liliang/workspace/zyb/teacher-ui-basic/node_modules/postcss-load-config/index.js:51:26@./node_modules/element-ui/lib/theme-chalk/index.css4:14-12413:3-17:514:22-132@./src/main.js@multi(webpack)-dev-server/client?http://localhost:8080webpack/hot/dev-server./src/main.js其实这个比较坑爹。根据报错，没有办法解决。后来查询文档，终于搞定了。解决方法：在根目录下添加一个文件：postcss.config.js如图：文件内容为：module.exports={plugins:[require('autoprefixer')()]}安装以上依赖自己：npminstallautoprefixer–save-dev然后再重启服务，不行就在心里骂我。你完成了。================经过项目后期使用，模拟数据请求优化：直接上传代码（其他不变）第一部分//newstartletglob=require('glob');constexpress=require('express');constapp=express();letapiRoutes=express.Router()letappData=require('../data/config');letgetApi=appData['get'];//所有get请求letpostApi=appData['post'];//所有post请求//查找所有json文件letentryJS={};entryJS=glob.sync('./data/**/*.json').reduce(function(prev,curr){prev[curr.slice(7)]='.'+curr;returnprev;},{});//合并所有json文件到In一个jsonletjsonData={};for(letiinentryJS){letdata=require(entryJS[i]);jsonData=Object.assign(jsonData,data);}app.use('/',apiRoutes);//newendparttwo//newstartbefore(app){//获取第三版for(letiingetApi){app.get(getApi[i],function(req,res){res.json(jsonData[i]);});}for(letjinpostApi){app.post(postApi[j],function(req,res){res.json(jsonData[j]);});}}//上面代码的新结尾是webpack。dev.conf.js中的配置数据存储文件也需要修改为：vardata={//url是请求的地址，key是查询数据的入口//getrequestApiget:{seller:'/api/seller',goods:'/api/goods',tableList:'/api/tableList',strategyDetail:'/miscourse/shelfstrategy/shelfstrategydetail'},//postrequestApipost:{goods:'/api/goods',strategyEdit:'/micourse/shelfstrategy/shelfstrategyupdate',strategyAdd:'/micourse/shelfstrategy/shelfstrategycreate',uploadfileimg:'/course/api/uploadfileimg'}};module.exports=数据;
