如何在XAMPP环境下部署React项目，设置静态资源托管？

本文共计936个文字，预计阅读时间需要4分钟。

React项目不能直接丢进XAMPP的htdocs目录就跑起来——它不是纯静态HTML，而是依赖前端路由、资源路径和构建产品结构的单页面应用（SPA）。部署失败的核心原因有两个：

设置 package.json 的 homepage 为子路径

如果你把 build 后的文件放在 htdocs/react 下，访问地址是 http://localhost/react/，那么 homepage 必须设为 "/react"（注意：不是 "./react"，也不是完整 URL）。

• homepage 决定了所有 <script>、<link> 标签里资源路径的前缀，比如 /react/static/js/main.abc123.js
• 改完后必须重新运行 npm run build，否则 build 输出的 HTML 里路径还是错的
• 检查 build/index.html 中的 src 和 href 属性，确认是否都带了 /react/ 前缀

BrowserRouter 必须加 basename="/react"

没配 basename，React Router 会认为你部署在根路径，所有 push 或 Link 跳转都从 / 开始算，刷新页面时 Apache 就去找真实路径，自然 404。

• 代码里要写成 <BrowserRouter basename="/react">...</BrowserRouter>
• 如果用了 create-react-app，且只改了 homepage 没改 basename，build 后首页能打开，但点导航或刷新任意子路由（如 /react/dashboard）立刻 404
• basename 值必须和 homepage 完全一致，包括末尾斜杠（都不带，或都带；推荐都不带）

.htaccess 必须启用并正确重写前端路由

XAMPP 默认关闭 mod_rewrite，且 .htaccess 文件默认不生效。即使启用了，规则写错也会导致全部请求被拒或无限重定向。

• 先确保 E:\xampp\apache\conf\httpd.conf 中这行已取消注释：LoadModule rewrite_module modules/mod_rewrite.so
• 再确认对应虚拟目录或 htdocs/react 的 <Directory> 块中包含：AllowOverride All
• .htaccess 必须放在 htdocs/react/ 目录下（即 build 输出的根），内容如下：

RewriteEngine On RewriteBase /react/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /react/index.html [L]

注意：RewriteBase 必须和你的子路径完全匹配，否则重写目标路径错误，JS 加载失败或白屏。

PHP 后端接口需独立路径 + CORS 头

React 前端和 PHP 后端不能混在同一个子路径下，否则路由冲突、资源加载错乱。PHP 接口建议统一放在 htdocs/api/，并通过相对路径调用（如 /api/login）。

• PHP 脚本开头加上跨域头，避免浏览器拦截：header("Access-Control-Allow-Origin: *");
• 如果使用 fetch，且 API 路径是 /api/xxx，那它实际请求的是 http://localhost/api/xxx，和 React 所在的 /react/ 是平行关系，互不干扰
• 不要把 PHP 文件塞进 htdocs/react/ 里——Apache 会优先尝试把它当静态资源返回，而不是执行 PHP

最容易被忽略的是 RewriteBase 和 basename 的一致性，以及 AllowOverride All 这个开关——它不开启，.htaccess 就是废纸。另外，XAMPP Windows 版对大小写不敏感，但路径里多一个空格、少一个斜杠，都可能让 RewriteRule 失效，调试时直接看 Apache error log 最靠谱。