mock数据和后端请求接口如何共存

Posted 2020-12-12 taoyuanju

起因：
最近公司开发一个后台管理系统，前端用的是vue-element-admin。由于原型还没
有给出，所以需要提供一个demo给领导看。而element-admin已经有一套完整的权
限校验功能，所以无法改动太多。只能mock数据和后端数据结合，展示给领导看。

代码展示：

devServer: {
    port: port,
    open: false, //设置浏览器是否自动打开
    overlay: {
        warnings: false,
        errors: true
    },
    proxy: {
        ‘/api/dev‘: { //因为mock数据是开头是/api，这里用来区分是mock数据还是前端数据
            target: ‘http://127.0.0.1:9000‘,
            ws: true,
            changeOrigin: true,
            pathRewrite: {
                ‘^/api/dev‘: ‘‘ //重定向代理的路径，把/api/dev替换为空字符串
            }
        },

    },
    //这里有before和after两种方式，但是有后端接口的话，改用after更好。
    after: require(‘./mock/mock-server.js‘),