部署React网站至GitHub时npm安装gh-pages遇JSON解析错误求助

我帮你找到了问题所在——你的package.json文件存在JSON语法错误，这直接导致了npm命令执行时的JSON解析失败。具体错误点和修正方案如下：

错误分析 #

你的package.json里有两处语法问题：

1. 在"eslintConfig"对象的末尾多了一个多余的闭合大括号}，破坏了整个JSON的层级结构
2. "browserslist"对象被错误地放在了这个多余的大括号外面，导致它不属于顶层的JSON对象

修正后的完整package.json #

把你的package.json替换成下面的正确版本：

{
  "name": "myportfoliosite",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://inquisitivedev2016.github.io/React-Developer-Portfolio2",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-mdl": "^1.11.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

额外提醒 #

我注意到你原来的homepage写的是仓库地址，这不符合Create React App的要求——正确的homepage应该是GitHub Pages的访问地址（格式为https://<你的GitHub用户名>.github.io/<仓库名>），我已经在修正后的代码里帮你改好了，这样部署后才能正常访问你的站点。

后续操作步骤 #

1. 用上面的正确代码覆盖你项目里的package.json
2. 重新执行命令：npm install --save gh-pages
3. 继续按照官方部署文档的步骤执行npm run deploy即可完成部署

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