React应用部署至Heroku后显示开发构建版，如何部署生产版？

出现页面提示"This page is using the development build of React. 🚧"，核心问题是你当前的start脚本使用的是React开发环境的启动命令，导致Heroku运行的是开发构建版本。解决只需要调整package.json配置，不需要修改React代码，具体步骤：

• 安装静态服务器依赖
  React的生产构建产物是静态文件，需要用静态服务器托管，推荐使用serve：

  npm install --save serve
  # 或使用yarn
  yarn add serve
  

• 修改package.json的scripts配置
  把start脚本替换为启动静态服务器并指向生产构建目录的命令，保留build脚本不变（Heroku会自动执行它生成生产包）：

  "scripts": {
    "start": "serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

• 重新部署到Heroku
  提交修改并推送到Heroku即可：

  git add package.json package-lock.json
  git commit -m "切换为生产构建部署"
  git push heroku main
  

补充说明 #

Heroku对Create React App项目有自动检测机制：只要package.json里存在build脚本，部署时就会自动执行npm run build生成生产构建文件；修改后的start命令会启动静态服务器，加载build目录下的生产版本代码，自然就不会再显示开发版本的提示了。

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