Vue 配置请求转发（vue2 和 vue3 的方式不同）

前言

使用 Vue 和 Spring Boot 开发前后端分离项目时，配置前端项目和后端项目在不同的端口下启动。

步骤

vue3

在使用 vue-cli3 创建项目后，在项目的根目录下，新建 vue.config.js 文件，来配置关于请求转发：

let proxyObj = {};
proxyObj["/"] = {
    ws:false, // 关闭 webSocket
    target: "http://localhost:8081", // 后端的地址
    changeOrigin: true,
    pathRewrite: {
        '^/':''
    }
}

module.exports = {
    devServer:{
        host: "localhost",
        port: 8080,
        proxy: proxyObj
    }
}

将所有的 / 开头的请求转发到 8081 端口的地址上去。

注意：修改了配置文件 vue.config.js 之后必须重启，否则不会生效。

vue2

在 vue2 中，有一个 config 目录，在 vue3 中，这个目录是不存在的。

修改 config 目录下的 index.js 文件，修改 proxyTable,代码如下：

    proxyTable: {
      '/':{
        target: "http://localhost:8081", // 这个就是后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      }
    }

如下图：

参考文章：https://blog.csdn.net/weixin_43272781/article/details/105019133

每天学习一点点，每天进步一点点。