XAMPP部署Vue3项目404的根本原因是Vite的base配置与Apache代理未对齐：静态资源404需设base: "./"并重构建，API 404需启用mod_proxy模块并配置ProxyPass规则，二者缺一不可。
直接说结论：XAMPP 本身不是为现代前端项目设计的静态服务器，Vue 3（尤其是 Vite 构建的）必须正确配置 base 和 Apache 反向代理，否则必然出现 GET /js/index.xxx.js net::ERR_ABORTED 404 或 API 请求 404 —— 这两个错误不是代码写错了，而是路径和代理没对齐。
打包后静态资源 404：Vite 的 base 必须设为 "./"
Vite 默认输出的 HTML 中，所有 JS/CSS 资源路径是绝对路径（如 /js/index.abc.js），但 XAMPP 把你的 dist 文件夹放在子目录（比如 http://localhost/vue3-admin/）时，浏览器会去根目录找 /js/...，自然 404。
解决方法只有一处：在 vite.config.ts 里强制指定相对基础路径：
export default defineConfig({
base: "./", // 关键！不是 "/"，也不是空字符串
// 其他配置...
})
注意点：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
-
base: "./"会让所有资源路径变成相对路径（./js/...），适配任何子目录部署 - 如果部署在 XAMPP 根目录（
http://localhost/），base: "/"也行，但统一用"./"更安全 - 改完必须重新执行
npm run build，旧的dist文件夹要删掉再生成
API 请求 404：Apache 必须启用 mod_proxy 并配 ProxyPass
Vue 前端请求 /prod-api/login，但实际后端服务跑在 http://vapi.youlai.tech 或本地 http://localhost:8082，XAMPP 默认不会转发，所以返回 404 —— 它根本没把请求交给后端。
步骤很明确，三步缺一不可：
- 打开
xampp\apache\conf\httpd.conf，取消以下两行注释：LoadModule proxy_module modules/mod_proxy.soLoadModule proxy_http_module modules/mod_proxy_http.so - 在同一个文件末尾或
httpd-vhosts.conf里加反向代理规则（假设你把 dist 放在xampp\htdocs\vue3-admin）：ProxyRequests OffProxyPass "/prod-api/" "http://localhost:8082/" - 重启 Apache；确认 Windows 防火墙没拦截本地端口（如 8082）
常见错：
- 只配了
ProxyPass却没开模块 → 启动 Apache 失败或规则不生效 - 前端请求路径是
/api/login，但 ProxyPass 写成/prod-api/→ 匹配不上，仍 404 - 后端服务根本没运行，或者监听的是
127.0.0.1:8082而非localhost:8082→ Apache 无法连接
启动顺序和调试要点
别一上来就开浏览器。先验证每层是否通：
- 手动访问
http://localhost/vue3-admin/index.html，看页面能否加载（排除base错） - 打开浏览器开发者工具 → Network 标签页，刷新页面，检查所有
.js、.css是否状态码是 200 - 触发登录，看 Network 里
/prod-api/login请求是否发出，响应是 404 还是 502/503（502 表示代理连不通后端） - 在命令行执行
curl -v http://localhost/prod-api/login，绕过前端直接测代理是否工作
最易忽略的一点：XAMPP 的 Apache 默认不读取 .htaccess，所以别指望用它做重写或代理 —— 所有配置必须硬写进 httpd.conf 或虚拟主机配置里。
