Vue啟動報錯 Cannot find module 'webpack/bin/config-yargs'

恆222發表於2019-04-18
VueWeb

專案背景是 使用Vue開發SPA單頁面應用

鱉廢話，先上錯誤

Cannot find module 'webpack/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (D:\my\react-task\node_modules\webpack-dev-server\bin\webpack-dev-server.js:24:1)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
......
複製程式碼

好吧，我認為除了最上面這句，下面的資訊都可以先放到一邊（絕對不是因為我看不懂才用省略號代替的）.

碰到錯誤怎麼辦，搜尋引擎走一走，走馬觀花看了一圈（為了先解決問題），當然錯誤最後是解決了的。

錯誤原因

這個錯誤是在專案啟動的時候冒出來的。在報錯之前我在命令提示符裡瞎操作了一通，現在都忘了當時幹了什麼了，反正最後的結果就是報了上面那個錯，這裡給自已一個'啪啪啪'。

根據我在網上看到的，有兩種說法：

一種說是webpack 和 webpack-dev-server版本不匹配
另一種是webpack4之後，將config-yargs放到了webpack-cli裡面去了

怎麼看它們的版本呢？專案根目錄下有一個package.json檔案，裡面放了專案的描述和匯入的依賴包描述，然後有一個devDependencies屬性，在這裡面就可以看到上面三個模板依賴的版本 。

以下是我的（版本更改後的）：

"webpack": "^3.8.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.7",
複製程式碼

解決方案

先開啟cmd，定位到你本地的專案下，然後可以嘗試兩種解決方案

  1. webpack 版本在 4 以上時
    安裝 webpack-cli，然後更新
npm install webpack-cli -D
npm update
複製程式碼

我當時版本就是 4 點幾，然後執行了上面的操作，結果發現 webpack-cli 是沒下成功還是咋地，反正還是啟動失敗。

嗯哼，沒關係，我還能撐。

  1. 修改webpack和webpack-dev-server版本
    先刪後改，解除安裝之後安裝指定版本
//解除安裝版本
cnpm uninstall webpack -g
cnpm uninstall -g webpack-dev-server
//安裝指定版本
cnpm install webpack@3.8.0 --save-dev
cnpm install webpack-dev-server@2.9.7 --save-dev
複製程式碼

（不要糾結 -g 在前在後，據我實驗無所謂。）
這上面兩個版本是不衝突的（貌似webpack3 和 webpack-dev-server2次要版本高一點的 都還匹配，我沒試過，猜的）。

當然，如果到此時你還是報錯，嗯嗯嗯~。
把node_modules（在專案根目錄下）刪了吧，重灌。
刪除資料夾，在cmd中輸入 nmp install。

要是再搞不定，咳咳，那要不就別搞單頁面應用了吧。

over over over

相關文章