MERN栈React项目分client/api文件夹，无法部署到GitHub Pages如何解决

核心问题排查 #

你当前的配置写错了位置：MERN项目根目录的package.json是后端服务的配置文件，没有React相关的构建依赖，自然无法执行打包部署命令，所有GitHub Pages相关的配置都应该放在前端代码所在的client文件夹的package.json中。

具体调整步骤 #

1. 清理根目录package.json配置 #

删除根目录package.json中你额外添加的如下字段：

• homepage字段
• scripts里的start（这个根目录的start应该是启动Node后端服务的命令，你之前错写成了react-scripts start）、predeploy、deploy三个命令
  删除后根目录的scripts仅保留后端需要的配置即可，示例：

{
  "name": "mern-todo-api",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "author": "Shreyash Dongre",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mongoose": "^6.0.7"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

2. 配置client文件夹下的package.json #

进入client目录，修改该目录下的package.json：

1. 添加homepage字段：

   "homepage": "https://ShreyashDo.github.io/Full-stack-react-todo-app"
   

2. 在scripts块中添加部署相关命令：

   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   }
   

3. 在client目录下执行命令安装部署依赖：

   npm install gh-pages --save-dev
   

3. 调整前端API请求地址 #

GitHub Pages仅支持托管静态前端资源，无法运行Node后端和MongoDB服务，你需要先将后端代码单独部署到公网服务，然后把前端代码中所有调用后端接口的地址，从localhost开头的本地地址替换为公网可访问的后端接口地址，否则部署后前端请求会报错。

4. 执行部署命令 #

所有配置完成后，在client目录下执行部署命令即可：

npm run deploy

命令执行完成后会自动将打包好的前端代码推送到仓库的gh-pages分支，到仓库的Settings->Pages页面确认部署源为gh-pages分支，稍等几分钟即可访问部署后的页面。

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