vue中代理实现方法

vue中代理实现方法如下：

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir)
}
// 项目的主要配置文件
module.exports = {
    publicPath: '', //不用打包后放置的路径
    outputDir: "groupcode", //打包后的文件夹名字
    chainWebpack: (config) => {
        //修改文件引入自定义路径
        config.resolve.alias
            .set('@', resolve('src'))
    },
    devServer: {
        proxy: { //目的是解决跨域，若测试环境不需要跨域，则不需要进行该配置
            '/api2_1': {
                // 目标 API 地址
                target: 'https://api.taotiangou.cn/api2_1',
                // 如果要代理 websockets
                ws: true,
                // 将主机标头的原点更改为目标URL
                changeOrigin: true,
                pathRewrite: {
                    '^/api2_1': ''
                }
            },
            '/common': {
                // 目标 API 地址
                target: 'https://api.taotiangou.cn/common',
                // 如果要代理 websockets
                ws: true,
                // 将主机标头的原点更改为目标URL
                changeOrigin: true,
                pathRewrite: {
                    '^/common': ''
                }
            }
        }
    },
}

通过查看devServer的配置，我们发现，我们可以设置多个代理。设置代理遵循以下几个原则：

1、代理的字段为api接口路径的一部分。

2、代理的字段一般选取api接口最后一个相同的字段。

 

 

-------------------------------2023-0804-----------------------

也可以是如下的配置，相当于在/gateway 前面加上ip ,这样就不需要那个pathRewrite

 proxy: {
      '/gateway': {
        target: 'http://192.168.101.216',
        changeOrigin: true,
      },
    },