向public文件夹添加图片时Nodemon触发React页面刷新问题求助

核心原因 #

Nodemon默认会监听项目内多数文件的变更，即便你预期它只关注.js文件，若未明确排除client/public/storage目录，该目录下的图片新增/修改仍会触发Nodemon重启。另外，若你使用Create React App这类前端模板，其内置的dev server本身也会监听public目录的文件变化，两者叠加就会导致React页面强制刷新。

具体解决步骤 #

1. 配置Nodemon排除目标目录 #

在项目根目录创建或修改nodemon.json文件，明确忽略client/public/storage下的所有文件：

{
  "ignore": ["client/public/storage/**/*", "node_modules/"]
}

也可以直接在启动命令中添加忽略参数：

nodemon --ignore client/public/storage server.js

2. 限制React Dev Server的监听范围 #

如果使用Create React App，它默认监听public目录下所有文件。可以通过环境变量调整，修改package.json中的前端启动命令：

PUBLIC_URL=/ react-scripts start

若需要更灵活的配置，可通过react-app-rewired或eject项目后，修改webpack的watchOptions，排除storage目录。

3. 验证Nodemon实际监听范围 #

运行带verbose参数的命令，查看Nodemon实际监听的文件列表：

nodemon --verbose server.js

检查输出中是否包含client/public/storage下的文件，若有则说明排除路径配置有误，需根据项目实际结构调整路径写法。

4. 分离前后端监听范围 #

如果是通过concurrently等工具同时启动前后端服务，让Nodemon仅监听后端代码目录（比如server/），完全不涉及前端client/目录：

{
  "watch": ["server/"],
  "ignore": ["node_modules/"]
}

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