vue3配置反响代理

在Vue3中配置反向代理主要是通过配置vue.config.js文件来实现的。具体步骤如下：

1. 在项目的根目录下找到vue.config.js文件（如果没有该文件可以手动创建）。
2. 在vue.config.js文件中添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 设置反向代理的目标地址
        changeOrigin: true, // 是否改变请求头中的host值
        pathRewrite: {
          '^/api': '' // 将请求地址中的/api替换为空字符串
        }
      }
    }
  }
}

3. 根据实际需求调整以上代码中的配置：

- `target`：设置反向代理的目标地址，即要代理的接口地址。
- `changeOrigin`：是否改变请求头中的host值，默认为false。如果设置为true，则代理的请求头中的host值将会与目标地址的host值保持一致。
- `pathRewrite`：设置路径重写规则，用于将请求地址中的特定部分进行替换。

在以上配置中，我们将以"/api"开头的请求地址进行反向代理，将其转发到"http://example.com"。并且将请求地址中的"/api"替换为空字符串，这样在实际请求时就可以省略掉"/api"部分。

4. 保存vue.config.js文件，重启项目，即可实现反向代理的配置。

需要注意的是，为了让反向代理配置生效，确保vue.config.js文件处于正确的位置，且项目以开发模式运行（如使用npm run serve命令）。