vue-element-admin中同时使用真实接口和mock数

基于vue-element-admin项目进行开发,vue-element-admin本来是一个纯前端项目,使用mock进行接口模拟返回数据,不依赖后台服务.
刚开始开发时,后台同事提供了现成的用户登录认证相关的接口,但是没有业务相关的接口,所以前期可以调试登录相关的接口,但是业务接口还是需要mock来模拟
主要分为以下几步:

1.把mock改为真实接口

vue-element-admin本来使用的是mock,vue.config.js文件中devServer部分内容为:

devServer: {
    port: port,
    open: true,
    overlay: {
        warnings: false,
        errors: true
    },
    before: require('./mock/mock-server.js')
},

如果想要使用真实接口,需要把相关内容修改为:

devServer: {
    port: port,
    open: true,
    overlay: {
        warnings: false,
        errors: true
    },
    proxy: {
        [process.env.VUE_APP_BASE_API]: {
            target: 'http://10.130.224.171:80', // 测试
            changeOrigin: true,
            pathRewrite: {
                ['^' + process.env.VUE_APP_BASE_API]: ''
            }
        }
    }
},

此时可以使用真实接口,但是使用不了mock,mock接口会报404

2.真实接口和mock共用

把vue.config.js文件中devServer部分修改为以下内容:

devServer: {
    port: port,
    open: true,
    overlay: {
        warnings: false,
        errors: true
    },
    // after: require('./mock/mock-server.js'), // 此处有before和after两种方式,看了别人的文章刚开始发现before不生效,after生效,但改到最后发现这一句好像不需要,所以注掉了
    proxy: {
        // 更新-貌似这个也不需要,所以全部注释掉了,只留下一个真实接口的代理和main.js中引入的mock就好了
        // [process.env.VUE_APP_BASE_API + 'vue-admin-template']: { // 'vue-admin-template'为vue-element-admin项目mock接口的公共前缀,如果这个公共前缀做了修改,此处也需要做相应修改
        //    target: `http://localhost:{port}`,
        //    changeOrigin: true,
        //      // pathRewrite: {
        //      //    ['^' + process.env.VUE_APP_BASE_API]: ''  // 只用mock时,使用url'/vue-admin-template/table/list'发送请求时,真实的url是'http://localhost:9528/dev-api/vue-admin-template/table/list',所以我认为此处不需要做url替换
        //      //   }
        // },
        [process.env.VUE_APP_BASE_API]: {
            target: 'http://10.130.224.171:80', // 测试
            changeOrigin: true,
            pathRewrite: {
                ['^' + process.env.VUE_APP_BASE_API]: ''
            }
        }
    }
},

此时可以正常访问真实接口数据,mock接口数据返回431(Request Header Fields Too Large /请求头字段太大),不是404了
然后发现main.js中mock相关的部分添加了条件判断

if (process.env.NODE_ENV === 'production') {
    const { mockXHR } = require('../mock')
    mockXHR()
}

把条件判断去掉就好了,或者修改为如下:

if (process.env.NODE_ENV === 'development') {
    const { mockXHR } = require('../mock')
    mockXHR()
}

main.js文件中mock相关的代码在部署生产环境之前,务必要删掉!务必!!务必!!!
此外,由于真实接口的正常返回200,而vue.config.js中mock的正常返回码为20000,如果想要同时使用两种方案,需要以下两种方案二选一:

1. 统一两种方案的code编码,我选择把mock的返回code统一为200
2. 在request.js文件中同时添加200和20000的放行条件

这样就可以同时使用真实接口和mock了,但是这样改完在控制台network中看不到mock的数据,小遗憾