Vite 的热更新（HMR）在 XAMPP 的 Apache 下无法原生工作，因其依赖 WebSocket、ESM 动态导入等机制，而 Apache 仅提供静态文件服务，不支持 HMR；正确做法是 Vite 前端独立运行于本地开发服务器（如 localhost:5173），后端 API 通过 vite.config.ts 中的 server.proxy 转发至 XAMPP 的 Apache（如 localhost:80）。
直接说结论：Vite 的热更新（HMR）在 XAMPP 的 Apache 下无法原生工作——不是配置错了，而是根本没走 Vite 开发服务器。你把 vite dev 启动的前端塞进 xampp\htdocs 里，等于把一辆跑车停进拖拉机车库，还指望它自己点火加速。
别把 vite dev 丢进 htdocs 目录
这是最常踩的坑。XAMPP 的 Apache 是静态文件服务器，它不理解 vite dev 的 WebSocket、模块热替换、ESM 动态导入这些机制。你把 npm run dev 启动的服务目录（比如 src/ 或根目录）整个复制进 xampp\htdocs\my-app，浏览器访问 http://localhost/my-app/，实际加载的是 Apache 返回的原始 HTML + JS，而 Vite 的 HMR 客户端根本没启动，自然“不更新”。
- 正确做法：Vite 前端必须独立运行在自己的开发服务器上（
localhost:5173等），和 XAMPP 的 Apache（localhost:80或:8081）分端口并行 - API 调用走代理：在
vite.config.ts中配server.proxy，把/api/请求转发到后端（比如http://localhost:8082），而不是让前端请求发给 Apache - 如果非要用 Apache 托管开发版，只能用
vite build后的dist，但那就没了热更新——这不属于“配合”，只是部署
vite.config.ts 的 base 和 hmr 配置必须对齐子路径
当你确实需要把构建后的 dist 放进 XAMPP 子目录（如 xampp\htdocs\vue3-admin），且希望 HMR 在开发时也能适配该路径（比如你在本地调试时也模拟子路径），就必须显式协调 base 和 hmr：
-
base: "./"→ 强制所有资源路径为相对路径（./assets/index.js），避免 404；改完必须重执行npm run build，旧dist要删干净 -
server.hmr.path必须匹配 base：若base: "/vue3-admin/"，则需设hmr: { path: "/vue3-admin/__hmr" }，否则 WebSocket 连接 404 - 不要混用
base和server.proxy时不加区分：proxy 规则匹配的是浏览器发出的请求路径，不是文件系统路径；proxy: { "/api": "http://..." }和base: "./"可共存，但base: "/sub/"时，HMR 的 client 会默认连/sub/__hmr，不配hmr.path就断连
跨域、端口、环境变量三者容易串扰
XAMPP 和 Vite 共存时，真正的冲突不在代码，而在运行时上下文：
立即学习“前端免费学习笔记（深入）”；
- Apache 占
:80，Vite 默认占:5173—— 没问题；但如果你把 Vite 改成:80，必然报EADDRINUSE，此时应改 Apache 端口（httpd.conf改Listen 8081和ServerName localhost:8081），而非硬刚 - Windows 下 XAMPP 控制面板打开的 Shell 常不继承系统 PATH，导致
node -v报错；绕过方法：直接用系统终端（CMD/PowerShell）启 Vite，别依赖 XAMPP 的 Shell - 前端请求 API 时出现 CORS 错误？别急着改 Apache 的
httpd.conf加Header set Access-Control-Allow-Origin—— 开发阶段优先用 Vite 的server.proxy，它在请求发出前就转发，根本不会触发浏览器跨域检查
Axios 拦截器在热更新下重复注册
这个坑藏得深：你每次保存代码触发热更新，request.js 模块被重新执行，axios.interceptors.response.use(...) 就又被调一次，旧拦截器还在，新旧并存，结果一个响应被处理 N 次。
- 错误写法：
let registered = false; if (!registered) { axios.interceptors...; registered = true; }—— 热更新后registered重置为false，照样重复 - 正确写法：把标记挂到 Axios 本身上，因为函数对象在 HMR 中是稳定的：
if (!axios.__responseInterceptorRegistered) { axios.interceptors.response.use(...) axios.__responseInterceptorRegistered = true } - 更稳妥的做法是封装成可卸载的拦截器，或只在应用入口（如
main.ts）注册一次，避免模块级副作用
复杂点在于：你得同时盯住三个东西——Vite 的运行时行为、Apache 的静态服务边界、以及浏览器发起请求的真实路径。任何一环的路径假设错了，404 或 HMR 失效就必然发生，而且错误日志往往不直接告诉你哪一环断了。
