Deepin运行 npm run dev 出错 Error: watch /VueProjects/vue-element-admin-master/mock ENOSPC

开发环境

• 操作系统： Deepin 15.11（Debian）
• vue-element-admin v4.2.1
• vue 2.6.10
• element-ui 2.7.0
• webpack 4.42.0

问题

项目使用Git克隆自 vue-element-admin 官方仓库，顺利安装依赖包，然后npm run dev 报如下错误：

Error: watch /media/redstar/DATA/VueProjects/vue-element-admin-master/mock ENOSPC
    at _errnoException (util.js:992:11)
    at FSWatcher.start (fs.js:1382:19)
    at Object.fs.watch (fs.js:1408:11)
    at createFsWatchInstance (/media/redstar/DATA/VueProjects/vue-element-admin-master/node_modules/chokidar/lib/nodefs-handler.js:38:15)
    at setFsWatchListener (/media/redstar/DATA/VueProjects/vue-element-admin-master/node_modules/chokidar/lib/nodefs-handler.js:81:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/media/redstar/DATA/VueProjects/vue-element-admin-master/node_modules/chokidar/lib/nodefs-handler.js:233:14)
    at FSWatcher.NodeFsHandler._handleDir (/media/redstar/DATA/VueProjects/vue-element-admin-master/node_modules/chokidar/lib/nodefs-handler.js:429:19)
    at FSWatcher. (/media/redstar/DATA/VueProjects/vue-element-admin-master/node_modules/chokidar/lib/nodefs-handler.js:477:19)
    at FSWatcher. (/media/redstar/DATA/VueProjects/vue-element-admin-master/node_modules/chokidar/lib/nodefs-handler.js:482:16)
    at FSReqWrap.oncomplete (fs.js:153:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/redstar/.npm/_logs/2020-03-06T06_56_50_721Z-debug.log

分析

排除不可能的原因

一般碰到这种问题会先去排查项目依赖安装是否有问题，我这边安装时有个报错：

Installed to /VueProjects/vue-element-admin-master/node_modules/node-sass/vendor/linux-x64-57/binding.node
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1912 packages from 1935 contributors in 362.973s

不过这个大家都知道是苹果系统需要的包，Linux和Windows系统可以忽略这个错误，所以可以排除，反正我安装时没有其他报错，说明需要的包都安装成功了。

发现关键问题

我开始是沿着 npm ERR 的错误排查，以为是 webpack 的版本有问题，各种折腾，结果还是报上面的错误，说明还有更底层的问题。
然后继续看 npm run dev 报错的关键部分：Error: watch /VueProjects/vue-element-admin-master/mock ENOSPC，npm 虽然也有报错，但那是结果不是原因。
这里面的关键错误提示其实是 ENOSPC，什么意思？这其实是个系统错误 Error No more hard-disk space available 的缩写，意思是没有更多的磁盘空间可以使用，关于这个错误还有一段解释：
What this command does is to increase the number of watches allowed for a single user. By the default the number can be low (8192 for example). When nodemon tries to watch large numbers of directories for changes it has to create several watches, which can surpass that limit.
意思是 nodemon监听文件过多（超过系统允许监听的默认值）导致出现异常。系统默认允许监听文件数为一个较低数值，例如8192。可以通过增加系统允许监听文件数，避免这个报错。

nodemon 是什么

nodemon Node自动重启工具，在编写调试 Node.js 项目，修改代码后，需要频繁的手动 close 掉，然后再重新启动，非常繁琐。后来出了很方便的 nodemon 这个工具，它的作用是监听代码文件的变动，当代码改变之后，自动重启。
关于 nodemon 有一系列配置，这里不再赘述。

问题总结

结合了项目的启动方式，发现启动时，使用了 nodemon 进行文件监听。而且，我们一般做前段开发，关于UI框架底层的实现和配置，大部分人都不太关注，所以基本不会给 nodemon 配置过滤规则。因此，会导致监听文件超过默认值，解决办法就是提高这个值。

解决办法

方法一：提高系统允许监听文件数

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

数字 524288 可以根据电脑配置适当调整大些，保证能够正常运行即可。

方法二：过滤掉不必要的监听的文件

在项目的根目录，创建 nodemon.json 文件，并设置过滤内容。

// nodemon.json
{
  "ignore": [
    "*.test.js", 
    "dist/*"
  ]
}

需要注意的是，nodemon 会默认忽略掉以下类型的文件， .git, node_modules, bower_components, .nyc_output, coverage， .sass-cache。因此，不必将这些类型的文件放入到配置中。