vue webpack反向代理

在Vue项目中使用Webpack反向代理可以帮助我们解决跨域请求的问题。下面是一些步骤可以帮助你实现反向代理：

1. 首先，安装`http-proxy-middleware`库：在终端中运行命令`npm install http-proxy-middleware --save-dev`。

2. 在Vue项目的根目录下创建一个`vue.config.js`文件，如果已经存在则打开该文件。

3. 在`vue.config.js`文件中添加以下配置：

const proxyMiddleware = require("http-proxy-middleware");

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://api.example.com", // 你想要代理的域名
        changeOrigin: true,
        pathRewrite: {
          "^/api": "" // 如果接口没有`/api`前缀，可以进行修改
        }
      }
    }
  }
};

在上述代码中，我们使用`proxy`选项来配置反向代理。`/api`是前端请求的接口，通过代理将请求转发到`http://api.example.com`域名下。你可以根据实际情况修改这些配置。

4. 保存文件并重新启动Vue开发服务器。现在，所有以`/api`开头的请求都会被代理到目标域名，并通过Webpack提供的反向代理进行转发。

这样配置后，你可以在Vue项目中使用相对路径 `/api/xxx` 来请求你的后端接口，Webpack会将这些请求转发到目标域名。

注意：如果你的后端接口已经支持了跨域请求，你可以直接在前端访问后端接口，而不需要配置反向代理。反向代理的作用主要是在开发环境中模拟跨域请求。