React项目使用nodemon修改代码后如何仅刷新当前页而非新开标签页

问题原因 #

你当前的配置中，nodemon 监测到代码变更重启服务时，会重新执行 react-scripts start 命令，而Create React App默认每次启动开发服务器都会自动打开新的浏览器标签，就会出现每次改代码都新开标签的问题。

解决方案 #

以下两种方案任选其一即可：

方案1：修改启动命令添加环境变量 #

通过在start命令前添加BROWSER=none环境变量，禁用自动打开浏览器的逻辑，不同系统的写法如下：

• Mac/Linux 环境
  修改package.json的scripts配置：

  "scripts": {
    "start": "BROWSER=none react-scripts start",
    "dev": "nodemon ./app.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

• Windows cmd 环境

  "start": "set BROWSER=none && react-scripts start",
  

• 跨系统通用（推荐）
  先安装cross-env依赖抹平系统环境变量差异：

  npm install cross-env --save-dev
  

  再修改启动命令：

  "start": "cross-env BROWSER=none react-scripts start",
  

方案2：新增.env配置文件（更简洁） #

在项目根目录新建名为.env的文件，写入以下内容即可：

BROWSER=none

该方案无需修改启动命令，对所有系统环境都生效。

效果验证 #

配置完成后重启npm run dev，第一次启动需要手动打开浏览器访问默认地址http://localhost:3000，后续修改代码时只会刷新当前已打开的页面，不会再新开标签。

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