Vite代理配置不生效问题

1、问题：

在写Vite+vue3.0项目时，配置vite代理，遇到不起效的问题，具体如下：

// vite.config.ts
proxy: {
      '/api':  ' http://localhost:3000'
    }

如上简写的写法，代理不生效。

2、解决方案：

查看官网后，改用如下写法生效：

 //vite.config.ts

proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }

3、原因排除：

经过测试发现，不添加“rewrite”属性时，代理配置仍存在不生效的情况，

例如：

// 此写法可能存在代理不生效的情况
proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true
    }
  }

 4、其他

在vite5.0版本中略有不同，请参考如下：

const BaseURL = "/api";

 // vite.config.js
 server: {
    //用来配置跨域
    host: '0.0.0.0',
    port: 80,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',//目标服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }