【Vue-cli3开始】vue.config.js配置：将请求代理到本地mock的json数据

在开发过程中，前后端的进度不统一，对于前端同学来说，往往需要自己mock json数据来处理接口逻辑，或者直接将请求代理到后端同学的开发机上（如果后端同学ready的话）~
vue-cli2的代理方法网上较多，这里就不介绍了~
vue-cli3开始高度集成，如果我们需要修改一些配置的话，需要在项目根目录下创建vue.config.js来配置~

介绍可见官网devServer，这个介绍比较简单，详细的可参考webpcak的devServer，或者http-proxy-middleware

接下来就来说说如何将请求代理到后端同学的机器上，这种方式比较简单~

// vue.config.js
module.exports = {
    devServer: {
        // 服务启动后是否自动打开浏览器
        open: true,
        // 域名
        host: '127.0.0.1',
        // 端口
        port: 8000,
        // 代理
        proxy: {
            // 可为不同的接口配置不同的代理地址
            '/user': {
                // 服务地址，即你要访问的服务器地址
                target: 'http://192.100.10.2:8000/',
                // 路径重写，将'/user/login'重写为'/login'
                pathRewrite: {
                    '^/user': ''
                },
                // 所有信息都在命令行工具打印
                logLevel: 'debug'
            },
            '/goods': {
                // 服务地址，即你要访问的服务器地址
                target: 'http://192.100.10.10:8000/',
                // 路径重写，将'/goods/list'重写为'/list'
                pathRewrite: {
                    '^/goods': ''
                }
            }
        }
    }
}

但是，大多数情况下，前端同学是需要自己写json数据的，上面的代理方式更适合联调阶段~下面就来说如何读取本地json数据

// vue.config.js
const path = require('path');

module.exports = {
    devServer: {
        before(app) {
            // 根据你的url规则来定
            app.all('/api/*', (req, res) => {
                // 根据你的json数据地址来适配，是否和请求url完全一致
                const url = req.path.replace('/api', '');
                // json数据
                const filePath = `/public/mock/${url}.json`;
                // json数据绝对地址
                const abPath = path.join(__dirname, filePath);
                const data = require(abPath);
                res.json(data);
            })
        }
    }
}

熟悉webpack的同学，看到这个是不是感觉很亲切~这里就是按照webpcak的devServer文档配置的~

好了，就到这里吧，这个问题搞了两天，搜了好多内容，终于搞定了~