vue脚手架配置代理

方法一

在vue.config.js中添加如下配置

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

说明

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

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

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

方法二

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

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //代理服务器（方式二）
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:5000',
        pathRewrite: {
          '^/api1' : ''
        },
        ws: true, //用于支持websocket
        changeOrigin: true //用于控制请求头中的host值
      },
      '/api2': {
        target: 'http://localhost:5000',
        pathRewrite: {
          '^/api2' : ''
        },
        ws: true, //用于支持websocket
        changeOrigin: true //用于控制请求头中的host值
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
})
​

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

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