请问vue项目 设置本地代理这个有什么用

Question

如图所示的target和pathRewrite似乎没有用到，真正发送请求反而是env.dev.js中设置的Base_url路径和地址

Answer 1

用来在开发环境进行请求转发。
例如：

devServer: {
    // ...
    proxy: {
        '/api': 'http://localhost:3000'
    }
}

代码中请求/api/demo，会被代理到http://localhost:3000/api/demo上。具体看webpack文档https://webpack.js.org/configuration/dev-server/#devserverproxy

本质上，webpack-dev-derver会内置了Express来实现请求代理。

Answer 2

如果我没记错的话，Vue.js 的 proxy 复用了 webpack 的 devserver。所有的使用了 webpack 的前端框架都提供了这么一个选项。
其主要用途是将本地的 API 请求代理到其他地方去。

例如，你的代码是前后端分离的。前端页面服务在 http://localhost:3000 而后端服务则监听在 http://localhost:8080。此时当你的页面访问后端 API （例如 http://localhost:8080/api/users） 的时候，会由于跨域而无法访问。此时你可以通过设置反向代理，把 http://localhost:3000/api/uesrs 转发到 http://localhost:8080/api/users，从而避免跨域问题。

转发目标还可以是远端的测试服务器或者实际的生产服务器地址。