vue脚手架配置代理

方法一

在vue.config.js 中添加配置

devServer: {
    proxy: 'http://localhost:5000'
}

优点：配置简单，请求资源时直接发给前端（8080）即可
缺点：不能配置多个代理，不能灵活控制是否走代理
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二

在vue.config.js 中添加配置

module.exports = {
    // 开启代理服务器
    devServer: {
        proxy: {
            // /api请求前缀，
            '/api': {
                // 代理目标基础路径
                target: 'http://localhost:5000',
                // 重写路径
                pathRewrite: { '^/api': '' },
                ws: true, //用于支持 websocket 默认true
                changeOrigin: true // 默认true 用于控制请求头中host的值
            },

            '/demo': {
                target: 'http://localhost:5001',
                // 重写路径
                pathRewrite: { '^/demo': '' },
                ws: true, //用于支持 websocket 默认true
                changeOrigin: true // 默认true 用于控制请求头中host的值
            },
        }
    }
}

优点：可以配置多个代理，可以灵活控制请求是否走代理
缺点：配置繁琐，请求资源时候必须加前缀