Vite+React应用是否存在文件数量/大小限制？报错求助

问题场景 #

在基于Vite、React、Node.js的车牌识别AI结果展示项目中，此前执行npm run dev可正常启动，但添加约100张图片（项目内已有更多图片，后续还会持续增加）后触发如下错误，删除部分图片后应用恢复正常；且仅在文件存储于网络磁盘时出现该问题，另一台使用本地磁盘存储的Windows 10电脑即使存放更多文件也无异常：

node:internal/errors:490
ErrorCaptureStackTrace(err);
^

Error: UNKNOWN: unknown error, watch
at FSWatcher._handle.onchange (node:internal/fs/watchers:207:21)
Emitted 'error' event on FSWatcher instance at:
at FSWatcher._handleError (file:///"path"/my_app/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:52133:10)
at NodeFsHandler._boundHandleError (file:///"path"/my_app/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:50608:43)
at file:///"path"/my_app/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:50452:5
at foreach (file:///"path"/my_app/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:50356:5)
at fsWatchBroadcast (file:///"path"/my_app/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:50451:3)
at FSWatcher. (file:///"path"/my_app/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:50500:9)
at FSWatcher.emit (node:events:513:28)
{ errno: -4094, syscall: 'watch', code: 'UNKNOWN', filename: null }

问题本质 #

Vite、React本身没有硬性的文件数量或大小限制，该错误核心原因是Node.js的文件系统监视器（FSWatcher）对网络磁盘的监听支持存在缺陷。网络磁盘的文件系统事件通知机制与本地磁盘差异较大，当文件规模达到一定程度时，会超出其监听能力阈值，从而触发UNKNOWN错误。

可行解决方法 #

结合你可通过API访问本地数据库的条件，推荐以下几种方案：

1. 排除图片目录的Vite监听 #

修改vite.config.js，将存储大量图片的目录加入监听忽略列表，避免Vite对该目录触发文件监听：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      ignored: ['**/your-image-folder/**'] // 替换为你的实际图片目录路径
    }
  }
})

注：此方案下该目录的文件变化不会触发热更新，适合图片不频繁修改的场景。

2. 通过API动态加载图片 #

利用本地数据库搭建简单Node.js后端接口，前端通过API请求加载图片，而非将图片直接存放在前端项目目录中，彻底规避前端目录文件过多的问题：

• 后端示例（Node.js/Express）：

const express = require('express')
const fs = require('fs')
const path = require('path')
const app = express()

// 根据图片ID返回对应图片的接口
app.get('/api/images/:id', (req, res) => {
  const imageId = req.params.id
  // 从数据库获取图片存储路径（替换为你的实际数据库查询逻辑）
  const imagePath = getImagePathFromDB(imageId)
  res.sendFile(path.resolve(imagePath))
})

app.listen(3001, () => console.log('图片API服务运行在3001端口'))

• 前端调用示例：

function LicensePlateImage({ imageId }) {
  return <img src={`http://localhost:3001/api/images/${imageId}`} alt="车牌识别结果" />
}

3. 迁移图片至本地临时目录 #

若开发环境需要直接使用图片，可将网络磁盘中的图片同步到本地临时目录，前端项目引用本地目录的图片，绕过网络磁盘的监听限制。

4. 调整Node.js监听限制（备选） #

部分系统可通过修改max_watches参数提升Node.js的文件监听能力，但此方法对网络磁盘兼容性较差，仅作为补充方案：

# Linux/macOS临时生效命令
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

补充说明 #

你尝试从index.html所在文件夹外读取图片被限制，是因为Vite dev server默认仅开放项目根目录作为静态资源路径，而通过API加载图片的方式可绕过该限制，同时符合安全规范。

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