最近嘗試使用vite，初始化vue項(xiàng)目之后，運(yùn)行 npm run dev 報錯，問題分析以及解決方案記錄一下。

報錯內(nèi)容如下：

報錯內(nèi)容

throw new Error(`esbuild: Failed to install correctly ^ Error: esbuild: Failed to install correctly   Make sure you don't have "ignore-scripts" set to true. You can check this with "npm config get ignore-scripts". If that returns true you can reset it back to false using "npm config set ignore-scripts false" and then reinstall esbuild.   If you're using npm v7, make sure your package-lock.json file contains either "lockfileVersion": 1 or the code "hasInstallScript": true. If it doesn't have either of those, then it is likely the case that a known bug in npm v7 has corrupted your package-lock.json file. Regenerating your package-lock.json file should fix this issue.   ...  at Module._compile (internal/modules/cjs/loader.js:1015:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10) at Module.load (internal/modules/cjs/loader.js:879:32) at Function.Module._load (internal/modules/cjs/loader.js:724:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12) at internal/main/run_main_module.js:17:47 ... error when starting dev server: Error [ERR_STREAM_DESTROYED]: Cannot call write after a stream was destroyed  at doWrite (_stream_writable.js:399:19) at writeOrBuffer (_stream_writable.js:387:5) ... npm ERR! command failed npm ERR! command sh -c vite ...

解讀報錯

1. 首先確認(rèn)是esbuild的報錯，安裝失敗。

2. 報錯信息其實(shí)已經(jīng)很清楚了

3. 針對 npm 版本v7以下

   1. 首先確認(rèn) ignore-scripts 是否被設(shè)置成 true 。
   2. 運(yùn)行 npm config get ignore-scripts ，如果是 false 則是正確的，否則需要通過運(yùn)行 npm config set ignore-scripts false 將 ignore-scripts設(shè)置為 false 。
   3. 通過設(shè)置之后，再次運(yùn)行調(diào)試應(yīng)該是ok的了。

4. npm 版本v7以上的

   1. 還需要確認(rèn)一下 package-lock.json 文件的 lockfileVersion 字段為 1 ，或者 hasInstallScript 設(shè)置為 true 了。如果兩者都沒有被正確設(shè)置，則就是一個已知的BUG。解決辦法參看后文

npm > v7

1. 通過github查閱vite倉庫的相關(guān)issue【https://github.com/vitejs/vite/issues/1580】，尤大也很明確的指出這個是esbuild的BUG。

   image.png

2. 問題的解決辦法在【https://github.com/evanw/esbuild/issues/462#issuecomment-771328459】。

   image.png

3. 手動運(yùn)行 node node_modules/esbuild/install.js 來解決esbuild安裝問題。

   image.png
   image.png

4. 安裝完成之后，再次運(yùn)行 npm run dev 即可。