React项目执行npm start无法打开localhost:3000的问题求助

• 首次使用React，执行npm start命令时会弹出浏览器选择窗口（对应截图：浏览器选择窗口1、浏览器选择窗口2）
• 选择谷歌浏览器后，打开的并非localhost页面，而是指定页面（截图：打开的指定页面）
• React安装过程无异常，当前package.json配置如下：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "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-scripts": "5.0.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"
    ]
  }
}

有效解决方案 #

1. 设置Chrome为系统默认浏览器 #

将谷歌浏览器设为系统默认浏览器，避免每次启动时弹出选择窗口，消除浏览器选择过程中可能触发的跳转异常。

2. 强制指定启动浏览器 #

修改package.json的scripts字段，直接指定Chrome作为启动浏览器：

"scripts": {
  "start": "BROWSER=chrome react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

如果是Windows系统，改用以下命令：

"scripts": {
  "start": "set BROWSER=chrome && react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

3. 清理缓存并重建项目 #

• 执行命令清理npm缓存：npm cache clean --force
• 删除项目根目录下的node_modules文件夹和package-lock.json文件
• 重新安装依赖：npm install
• 再次启动项目：npm start

4. 检查Chrome快捷方式参数 #

右键点击Chrome快捷方式，选择「属性」，检查「目标」栏是否附加了额外的网址参数。如果有多余的跳转网址，删除后保存，再重新启动项目。

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