React 18+Node v18部署空白页问题（含--openssl-legacy-provider配置）

首先修正你package.json里的scripts配置，冗余参数会导致构建/部署命令异常：

"scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts build --openssl-legacy-provider",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

你原命令里多余的build和i参数会干扰命令执行，先改成上面的标准格式。

接下来按以下步骤排查问题：

• 本地验证构建产物
  执行npm run build后，用npx serve -s build本地启动静态文件。如果本地也显示空白，说明是构建产物本身的问题，此时打开浏览器控制台，仔细检查Console、Network标签的错误（包括警告），比如资源加载失败、路由配置错误等。

• 路由配置检查
  如果项目用了React Router：

  • 若使用BrowserRouter，必须配置basename属性匹配你的子路径：

    <BrowserRouter basename="/admin">
      {/* 路由内容 */}
    </BrowserRouter>
    

  • 或者改用HashRouter，这种方式无需配置basename，更适配GitHub Pages这类静态托管平台。

• homepage配置优化
  将package.json里的homepage改为相对路径：

  "homepage": "./"
  

  相对路径适配更多托管场景，避免硬编码URL导致的路径错误。

• Netlify额外配置
  部署到Netlify时：

  • 确保项目的Publish directory设置为build
  • 若用BrowserRouter，需在public目录下创建_redirects文件，内容为：

    /*    /index.html   200
    

    用于处理单页应用的路由重写。

• GitHub Pages部署验证
  执行npm run deploy后，检查仓库的gh-pages分支是否正确生成了build目录下的所有文件，同时查看终端输出的部署日志，确认没有静默错误。

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