Vue启动报错 Cannot find module 'webpack/bin/config-yargs'

项目背景是 使用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 [email protected] --save-dev
cnpm install [email protected] --save-dev
复制代码

(不要纠结 -g 在前在后,据我实验无所谓。)
这上面两个版本是不冲突的(貌似webpack3 和 webpack-dev-server2次要版本高一点的 都还匹配,我没试过,猜的)。

当然,如果到此时你还是报错,嗯嗯嗯~。
把node_modules(在项目根目录下)删了吧,重装。
删除文件夹,在cmd中输入 nmp install。

要是再搞不定,咳咳,那要不就别搞单页面应用了吧。

over over over

猜你喜欢

转载自juejin.im/post/5cb860445188253b454b7568