React项目无法通过XAMPP部署，build后index.html为空求助

首先咱们先搞定最紧急的问题：npm run build后index.html为空。结合你的项目配置（用了Create React App，还有gulp相关依赖），我整理了几个排查和修复的关键点：

一、修复build后index.html为空的问题 #

1. 先看构建日志的错误信息 #

很多时候构建失败不会直接弹窗，而是在终端输出红色错误。你重新跑一遍npm run build，仔细看终端里的内容——比如有没有依赖缺失、语法错误，或者gulp任务和Create React App的构建流程冲突？比如你的package.json里既有react-scripts的build命令，又有gulp的依赖，如果之前配置过gulp构建任务，可能会干扰cra的默认构建流程。

2. 检查public/index.html模板 #

Create React App是基于项目根目录public文件夹下的index.html来生成build后的文件的。如果这个模板是空的、有语法错误，或者被误删了，那生成的index.html肯定也会有问题。赶紧去看看这个文件是不是正常的，有没有完整的HTML结构（比如<html>、<body>标签，还有<div id="root"></div>）。

3. 清理缓存重新构建 #

缓存有时候会搞出奇怪的问题，按这个步骤来：

• 先运行npm cache clean --force清理npm缓存
• 删除项目根目录的node_modules文件夹和package-lock.json文件
• 重新执行npm install安装所有依赖
• 再跑npm run build试试

4. 检查Craco配置（如果有的话） #

你用了@craco/craco，如果项目里有craco.config.js文件，看看里面的配置是不是有问题——比如有没有错误修改了publicPath或者构建入口，导致构建流程中断，生成空的index.html。如果不确定，可以先把这个文件重命名（比如改成craco.config.backup.js），用cra的默认配置构建试试。

二、修复后实现跨环境（XAMPP）部署 #

搞定index.html的问题后，咱们来部署到XAMPP，同时支持跨环境配置：

1. 确认build产物正常 #

先确保npm run build生成的build文件夹里，index.html有完整的内容，而且里面的js、css资源路径是正确的（比如/static/js/main.xxx.js这类）。

2. 部署到XAMPP #

• 打开XAMPP控制面板，启动Apache服务
• 找到XAMPP安装目录下的htdocs文件夹，把build文件夹里的所有文件（注意是文件，不是整个build文件夹）复制到htdocs下的一个子文件夹里，比如htdocs/my-react-app
• 打开浏览器访问http://localhost/my-react-app，就能看到你的React项目了

3. 解决React Router的刷新404问题 #

因为你用了react-router-dom，如果用的是BrowserRouter，部署到静态服务器（比如XAMPP的Apache）时，刷新页面会出现404。解决方法：

• 在你的部署目录（比如htdocs/my-react-app）里创建一个.htaccess文件，写入以下内容：

  Options -MultiViews
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^ index.html [QSA,L]
  

• 打开XAMPP的Apache配置文件（httpd.conf），找到#LoadModule rewrite_module modules/mod_rewrite.so这一行，去掉前面的#，保存后重启Apache，这样重写规则就生效了。

4. 跨环境配置（开发/生产不同API地址） #

如果你需要在不同环境用不同的配置（比如开发环境用本地API，生产环境用线上API），Create React App自带环境变量支持：

• 在项目根目录创建两个文件：.env.development和.env.production
• .env.development（开发环境用）：

  REACT_APP_API_URL=http://localhost:3000/api
  

• .env.production（生产环境用）：

  REACT_APP_API_URL=http://your-production-domain/api
  

• 在代码里用process.env.REACT_APP_API_URL来获取对应的地址，比如：

  fetch(`${process.env.REACT_APP_API_URL}/users`)
    .then(res => res.json())
    .then(data => console.log(data))
  

• 注意：所有自定义环境变量必须以REACT_APP_开头，Create React App才会识别并注入到代码中。

内容的提问来源于stack exchange，提问作者Šimon Slabý