如何在 XAMPP 环境中部署并运行基于 Vue 3 的本地管理后台-php教程-PHP中文网

xampp部署vue3项目404的根本原因是vite的base配置与apache代理未对齐：静态资源404需设base: "./"并重构建，api 404需启用mod_proxy模块并配置proxypass规则，二者缺一不可。

如何在 xampp 环境中部署并运行基于 vue 3 的本地管理后台

直接说结论：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 —— 它根本没把请求交给后端。

vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

网站特效

网站源码

网站素材

前端模板

如何在 XAMPP 环境中部署并运行基于 Vue 3 的本地管理后台

打包后静态资源 404：Vite 的 base 必须设为 "./"

API 请求 404：Apache 必须启用 mod_proxy 并配 ProxyPass

打包后静态资源 404：Vite 的 `base` 必须设为 `"./"`

API 请求 404：Apache 必须启用 `mod_proxy` 并配 `ProxyPass`