XAMPP部署Vue3后台教程详解

本文直击XAMPP部署Vue3管理后台时高频出现的404顽疾，一针见血指出根源并非代码错误，而是Vite的base配置与Apache反向代理未协同：静态资源404只需将vite.config.ts中base设为"./"并彻底重建dist；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: "./", // 关键！不是 "/"，也不是空字符串
  // 其他配置...
})

注意点：

• 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.so
LoadModule proxy_http_module modules/mod_proxy_http.so
• 在同一个文件末尾或 httpd-vhosts.conf 里加反向代理规则（假设你把 dist 放在 xampp\htdocs\vue3-admin）：
  ProxyRequests Off
ProxyPass "/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 或虚拟主机配置里。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~