vite中的config配置代理

在 Vue 项目中使用 Vite 配置代理，主要为了解决开发环境下的跨域问题。它通过将前端发起的请求“转发”到目标服务器，绕过了浏览器的同源策略限制。

配置代理的核心是在项目的 vite.config.js 文件中，使用 server.proxy 选项。

基础配置示例

下面是一个基础的配置示例，它将以 /api 开头的请求代理到 http://localhost:3000：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      // 1. 键：路径匹配规则
      '/api': {
        // 2. 值：代理配置对象
        target: 'http://localhost:3000', // 目标服务器地址
        changeOrigin: true, // 修改请求头中的 Host 为目标地址
        rewrite: (path) => path.replace(/^\/api/, '') // 可选：重写路径，移除 /api 前缀
      }
    }
  }
})

配置选项详解

  • '/api' (路径匹配规则)：当你的前端代码（如 axios）发起以 /api 开头的请求（例如 /api/user）时，该规则会被触发。
  • target (目标地址)：请求会被转发到的后端服务器地址，这是必须配置的。
  • changeOrigin (修改请求头)：建议设为 true。这会让代理服务器将请求头中的 Host 字段改为 target 的地址，从而避免一些后端服务因 Host 不匹配而拒绝请求。
  • rewrite (路径重写)：这是一个可选函数。如上例所示，它去掉了请求路径中的 /api 前缀。这样，前端请求 /api/user 实际会被转发到 http://localhost:3000/user。

高级配置：多代理与更多选项

  • 配置多个代理：只需在 proxy 对象中添加不同的规则即可。
proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
  },
  '/auth': {
    target: 'http://localhost:4000',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/auth/, '')
  }
}
  • 其他常用选项：
    • ws: true：支持代理 WebSocket 连接。
    • secure: false：如果目标服务器是 HTTPS 但使用了自签名证书，将此选项设为 false 可以忽略证书错误。

代理配置生效的关键点

  1. 修改 vite.config.js 后，必须重启开发服务器 (npm run dev 或 yarn dev)，配置才能生效。
  2. 代理配置仅在开发环境 (npm run dev) 下有效。项目打包后（npm run build），你需要通过配置 Web 服务器（如 Nginx）来解决跨域问题。
  3. 确保 target 地址（包括端口号）完全正确。一个无效的 target（如空字符串）会导致请求被转发到意想不到的地址。

总结

Vite 的代理配置是一个强大且便捷的开发工具。通过简单的配置，你就可以在本地开发时无缝对接后端 API，而无需担心跨域问题。