element-admin mock改成真实请求 vue-cli3 配置代理

Posted 2023-02-23

参考技术A 之前使用 element-admin 模板 自带的有mock请求，想替换成后台真正的请求，发现一只请求的是本地的localhost ，按照按照文档上的做（我直接注释了after 这一行，并修改了 proxy中target的代理地址）发现没有效果，再后来多方查询发现自己理解错了，移除分两个部分，一个是 移除mock，另外一个是修改mock地址为自己的

正确做法：1、不使用mock 也不使用代理 ：将 proxy与after都移除，请求的公共ip地址可以，新建config文件，在里面配置后，引用，这个看个人习惯 ，重要的是要将 proxy与after都移除
ps：貌似可以再vue.confing.js - configureWebpack中配置，还没弄懂怎么配，有知道的告诉一下
2、不使用mock，但是要反向代理：移除 after 并将 proxy 中的target 修改为代理地址，并且在element-admin封装的request请求中，将baseUrl注释掉

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

起因：
最近公司开发一个后台管理系统，前端用的是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‘),