使用create-react-app执行npm run build后build目录缺失index.html求助

你的核心问题是package.json里的homepage配置位置错误，它被错误嵌套在browserslist对象内部，导致react-scripts无法正确生成构建产物的入口文件index.html。

修复步骤： #

1. 调整package.json结构：把"homepage": "."从browserslist中移出，放到文件最顶层（和name、version同级）。
2. 清理并重新构建：删除当前的build目录，执行npm run build重新生成产物。
3. 本地验证部署：用你已安装的serve工具启动静态服务，执行命令：serve -s build，此时浏览器访问对应端口就能正常加载页面。

修正后的package.json示例： #

{
  "name": "react-task-tracker",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "react-scripts": "5.0.1",
    "serve": "^14.1.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

额外排查点： #

• 执行npm run build时留意终端输出，如果有报错信息（比如权限不足、依赖缺失），根据提示修复。
• 确保项目根目录下存在public/index.html文件，这是构建时生成产物入口的模板文件，缺失的话也会导致index.html无法生成。

内容的提问来源于stack exchange，提问作者Shaheer