vite.config.js详解；本地配置获取真实请求地址

---

这段代码是 Vite 配置文件vite.config.js中关于开发服务器(server)的配置，主要用于设置代理和开发服务器行为。下面我逐部分详细解释：

一、完整代码结构

server: {proxy: {"/inms-application": {target: loadEnv(mode, "./env/").VITE_APP_SERVEICE,changeOrigin: true,logLevel: "debug",bypass(req, res, options) {const realUrl = options.target + (options.rewrite ? options.rewrite(req.url) : "")res.setHeader("A-Real-Url", realUrl)}}},open: false,hmr: { overlay: false }
}

# 本地开发环境
NODE_ENV = "development"# 开发环境
VITE_APP_SERVEICE = 'http://192.168.100.91:52222'
# 测试环境
# VITE_APP_SERVEICE = 'https://192.168.100.61:53333'

二、逐部分解析

1. 代理配置 (proxy)

proxy: {"/inms-application": {// 配置详情...}
}

• 作用：为特定请求路径设置代理规则
• "/inms-application"：匹配所有以 /inms-application 开头的 API 请求
• 原理：当开发服务器收到匹配的请求时，会将其转发到目标服务器

2. 代理目标配置 (target)

target: loadEnv(mode, "./env/").VITE_APP_SERVEICE

• 作用：指定代理转发的目标服务器地址
• loadEnv(mode, "./env/")：动态加载环境变量
  • mode：当前 Vite 运行模式（如 development 或 production）
  • "./env/"：环境变量文件所在目录
• VITE_APP_SERVEICE：从环境变量文件中读取的目标服务地址（如 http://api.example.com）

3. 跨域处理 (changeOrigin)

changeOrigin: true

• 作用：修改请求头中的 Host 为目标服务器的域名
• 为什么需要：解决开发时的跨域问题，让目标服务器认为请求来自同源
• 效果：
  • 原始请求头：Host: localhost:3000
  • 转发后请求头：Host: api.example.com

4. 日志级别 (logLevel)

logLevel: "debug"

• 作用：设置代理调试信息的详细程度
• "debug" 级别会显示：
  • 原始请求路径
  • 代理后的目标 URL
  • 响应状态码
  • 在终端输出详细的代理日志，方便调试

5. 自定义绕过函数 (bypass):获取真实请求地址

bypass(req, res, options) {const realUrl = options.target + (options.rewrite ? options.rewrite(req.url) : "")res.setHeader("A-Real-Url", realUrl)
}

• 作用：在代理过程中插入自定义逻辑
• 参数：
  • req：客户端请求对象
  • res：服务器响应对象
  • options：代理配置选项
• 逻辑：
  1. 构建实际请求的 URL：

     const realUrl = options.target + (options.rewrite ? options.rewrite(req.url) : "")
     

     • 组合目标地址(target)和重写后的路径
  2. 添加自定义响应头：

     res.setHeader("A-Real-Url", realUrl)
     

     • 在响应头中添加 A-Real-Url 字段
     • 目的：在浏览器开发者工具中可以看到请求实际转发到了哪个地址（方便调试）

6. 开发服务器行为配置

open: false,
hmr: { overlay: false }

• open: false：禁用服务器启动时自动打开浏览器
• hmr: { overlay: false }：禁用热更新时的错误覆盖层
  • 默认情况下，Vite 会在代码出错时显示全屏错误覆盖
  • 设置为 false 后，错误只在控制台显示，不会遮挡页面

三、完整工作流程

1. 浏览器请求：http://localhost:3000/inms-application/user/data
2. Vite 开发服务器匹配到 /inms-application 开头的路径
3. 修改请求头中的 Host 为目标服务器域名
4. 转发请求到：${VITE_APP_SERVEICE}/inms-application/user/data
5. 在响应头中添加 A-Real-Url 显示实际请求地址
6. 将目标服务器的响应返回给浏览器
7. 终端输出详细的代理调试信息

四、实际应用场景

这种配置特别适用于：

1. 前后端分离开发时解决跨域问题
2. 调试 API 请求路径和响应
3. 不同环境（开发/测试/生产）的无缝切换
4. 监控和诊断代理行为

五、注意事项

1. VITE_APP_SERVEICE 需要在 ./env/ 目录下的环境变量文件中定义
2. 自定义响应头 A-Real-Url 仅在开发环境有效
3. 生产环境部署时需要移除或修改此代理配置
4. 高日志级别(debug)可能产生大量输出，生产环境应关闭