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.<anonymous> (/media/redstar/DATA/VueProjects/vue-element-admin-master/node_modules/chokidar/lib/nodefs-handler.js:477:19)
    at FSWatcher.<anonymous> (/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。因此，不必將這些類型的文件放入到配置中。