搞懂vite.config.js中的proxy

一直搞不明白vite.config.js中的"/api"和pathRewrite，看到一篇文章，来总结一下。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    // 项目运行的端口
    port: 8080,
    open: true,
    hmr: true,
    proxy: {
      //以/api开头的请求就要用到代理
      "/api": {
        //代理 请求后端的接口
        target: 'http://localhost:7070/',
        changeOrigin: true,
        pathRewrite: {
          //把所有的api都去掉
          '^/api': ''
        }
      }
    }
  },
})

1. 首先port表示项目运行的端口
2. 为什么要用代理？因为浏览器和服务器之间有跨域，但是服务器和服务器之间没有跨域，浏览器通过代理可以避免跨域请求的问题。
3. "/api"表示以"/api"开头的请求都要用到代理，在封装axios中baseURL就是/api，所以代理就是'http://localhost:7070/api/xxx'，这是后端的接口地址。
4. pathRewrite中的'^/api': ''就是在实际请求后端接口时把/api去掉。我使用了封装后的axios发送了一个请求

http://127.0.0.1:8080是发起请求的地址，/api/board/loadBoard是请求的路径，这是前端向后端接口发起请求。后端的接口为http://localhost:7070/board/loadBoard，这是最终结果，因为在pathRewrite中把api去掉了。

其实使用代理之后http://127.0.0.1:8080/api/board/loadBoard会变为http://127.0.0.1:7070/api/board/loadBoard，这两个地址都能返回数据。