vue脚手架配置代理服务器

方法一：

在vue.config.js（与src同级目录）中添加如下配置：

​    devServer: {

​      proxy: 'http://localhost:5000'

​    }

说明：

1.优点：配置简单，请求资源时直接发给前端（8080）即可

2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理

3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二：

编写vue.config.js配置具体代理规则：

​    module.exports = {

​      devServer: {

​        proxy: {

​        '/api': { //匹配所有以 /api 开头的请求路径

​          target: 'http://localhost:5000', //代理目标的基础路径

​          pathRewrite:{'^/api':''}, //重写路径 键值对  ^/api 以api开头的部分用空字符串替换

​          ws: true, //用于支持websoket

​          changeOrigin: true //用于控制请求头的host值

​        },

​        '/demo': {

​          target: 'http://localhost:5001',

​          pathRewrite:{'^/demo':''}, //重写路径 键值对  ^/api 以api开头的部分用空字符串替换

​          ws: true, //用于支持websoket

​          changeOrigin: true //用于控制请求头的host值

​        },

​        }

​      }

​      }

changeOrigin设置为true时，服务器收到的请求头中的host为：locahost:5000

changeOrigin设置为false时，服务器收到的请求头中的host为：locahost:8080

changeOrigin默认为true

说明：

1.优点：可以配置多个代理，且可以灵活的控制请求是否走代理

2.缺点：配置略微繁琐，请求资源时必须加前缀