现在Mock级别的路由已经有了，接下来我们就要准备对应的路由和响应的callback了，添加一个mock文件夹，专门放置一些mock接口的文件，利用node的fs模块引入所有需要mock的接口即可
const path = require('path'); const mockDir = path.resolve(__dirname, '../mock'); fs.readdirSync(mockDir).forEach(file => { const mock = require(path.resolve(mockDir, file)); // mockRouter就是上面Mock路由即可 mockRouter.use(mock.api, mock.response); });
2、Vue-cli3.x的基本知识，相对比于Vue-cli2.x的版本，把webpack的配置封装出来，抛出一些外在接口去修改webpack配置，我们需要了解的是针对开发模式express的使用（内部使用webpack-dev-serve），Vue-cli3.0需要的是在适当的时机处理开发模式的express实例，来达到Mock的目的
module.exports = { dev: { before: (app) => { // app就是底层的express实例，上面针对express实例的操作，全部换成app即可 } } }
3、至于mock的文件下面的js文件就是我们需要挂载到express的mock接口的信息，下面给出一个实例，其他仿照即可，一个js文件代表一个mock接口
// 注意，由于是针对子路由级别的，前端调用的url为/mock/get-info module.exports = { api: '/get-info', response: (req, res) => { // 由于添加了body-parser中间件，所以可以解析传入的body，这里就可以用来动态的生成JSON const flag = req.body.flag; console.log(req.body); res.send( { success: flag, code: 0, data: [], message: '获取信息成功', }, ); }, };
四：结合上面的几点整合处理
五：其他几种方式的Mock接口
mock.js去，给出官网，它会修改原生的XMLHttpRequest来拦截ajax请求，同时提供强大的根据模板生成数据
fastmock，类似本地Mock，数据放在了外网，团队配合可以选择，具体使用见链接
后端Controller生成静态JSON，不推荐，后端不会吊我们的，搞不好会干架，哈哈
六：总结
前端工程化的出现能够让前端做的事情很多很多，技术的广度能够支持你做一些有意思的事情。首先这个可以做一些优化，比如本地的Mock可以使用mock.js纯处理一些数据的生成工作。注意mock接口的url和自己proxy的接口不要冲突。使用Vue-cli3.0，它不仅是封装了webpack的配置，同时提供了自己一套插件机制，接下来写一个简单的cli插件自动化完成这些操作，
敬请期待。欢迎评论交流。