npm run dev启动失败 ERROR Failed to compile with 2 errors Module build failed: BrowserslistError:

最近想尝试一下用vue,js来做一个app。。。没错,小菜鸡的我记录这个大蠢bug.

当我的vue环境什么的都搭好的时候,最后一步npm run dev 问题就来了

Microsoft Windows [版本 10.0.16299.431]

(c) 2017 Microsoft Corporation。保留所有权利。
C:\Users\ASUS>cd F:\WEB\HBuilder\app
C:\Users\ASUS>f:
F:\WEB\HBuilder\app> cd travelApp
F:\WEB\HBuilder\app\travelApp>npm run dev
> [email protected] dev F:\WEB\HBuilder\app\travelApp
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
 15% building modules 42/45 modules 3 active ...der\app\travelApp\src\assets\logo.png{ BrowserslistError: F:\WEB\HBuilder\app\travelApp contains both browserslist and package.json with browsers
    at F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:189:15
    at eachParent (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:43:18)
    at Object.findConfig (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:172:20)
    at Object.loadConfig (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:126:37)
    at browserslist (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\index.js:194:22)
    at Browsers.parse (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\browsers.js:61:16)
    at new Browsers (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\browsers.js:52:30)
    at loadPrefixes (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
    at plugin (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
    at LazyResult.run (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:204:22)
    at F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:197:27
  name: 'BrowserslistError',
  message:
   'F:\\WEB\\HBuilder\\app\\travelApp contains both browserslist and package.json with browsers',
  browserslist: true }              15% building modules 43/45 modules 2 active ...der\app\travelApp\src\assets\logo.png{ BrowserslistError: F:\WEB\HBuilder\app\travelApp contains both browserslist and package.json with browsers
    at F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:189:15
    at eachParent (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:43:18)
    at Object.findConfig (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:172:20)
    at Object.loadConfig (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:126:37)
    at browserslist (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\index.js:194:22)
    at Browsers.parse (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\browsers.js:61:16)
    at new Browsers (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\browsers.js:52:30)
    at loadPrefixes (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
    at plugin (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
    at LazyResult.run (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:204:22)
    at F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:197:27
  name: 'BrowserslistError',
  message:
   'F:\\WEB\\HBuilder\\app\\travelApp contains both browserslist and package.json with browsers',
  browserslist: true }              94% asset optimization
 ERROR  Failed to compile with 2 errors                                                                         00:21:38
 error  in ./src/App.vue
Module build failed: BrowserslistError: F:\WEB\HBuilder\app\travelApp contains both browserslist and package.json with browsers
    at F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:189:15
    at eachParent (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:43:18)
    at Object.findConfig (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:172:20)
    at Object.loadConfig (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:126:37)
    at browserslist (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\index.js:194:22)
    at Browsers.parse (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\browsers.js:61:16)
    at new Browsers (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\browsers.js:52:30)
    at loadPrefixes (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
    at plugin (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
    at LazyResult.run (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:204:22)
    at F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:197:27
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-296 13:3-17:5 14:22-304
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js


 error  in ./src/components/HelloWorld.vue
Module build failed: BrowserslistError: F:\WEB\HBuilder\app\travelApp contains both browserslist and package.json with browsers
    at F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:189:15
    at eachParent (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:43:18)
    at Object.findConfig (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:172:20)
    at Object.loadConfig (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\node.js:126:37)
    at browserslist (F:\WEB\HBuilder\app\travelApp\node_modules\browserslist\index.js:194:22)
    at Browsers.parse (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\browsers.js:61:16)
    at new Browsers (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\browsers.js:52:30)
    at loadPrefixes (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
    at plugin (F:\WEB\HBuilder\app\travelApp\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
    at LazyResult.run (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:204:22)
    at F:\WEB\HBuilder\app\travelApp\node_modules\postcss\lib\lazy-result.js:197:27
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-656039f0","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-311 13:3-17:5 14:22-319
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 

 

这是网上的一个解决方法

是prettier模块导致的报错,查了下发现In prettier 1.13.0, default parser was removed with a minor version(used to be babylon), this breaks the formatter here.意思是在prettier的 1.13.0版本,默认的一个解析器被移除了导致项目创建失败解决办法把node_modules里的prettier删掉,重现下个之前的版本 npm install prettier@~1.12.0再运行就可以了

npm install prettier@~1.12.0

npm run dev

然而并未能解决。。。呜呜。

但是,昨天直到今天早上突然的恍然大悟啊啊啊 a,是自己没有好好看到自己的报错,一味去看网上跟自己的报错相似的帖子

 ERROR  Failed to compile with 2 errors                                                                         00:21:38
 error  in ./src/App.vue

Module build failed: BrowserslistError: F:\WEB\HBuilder\app\travelApp contains both browserslist and package.json with browsers

完全没有认真分析自己的报错,就盲目的上网找,这应该是最最忌讳的啊啊啊,

来段这个的翻译

 

错误无法编译,2个错误,00:21:38

错误。/ src / App.vue

模块构建失败:BrowserslistError:F:WEB HBuilder应用travelApp包含了browsercraigslist和package.json和浏览器

应该是browsercraigslist的相关文件跟package,json不能同时存在的意识罢.,望大神经过帮忙修正,..

所以我尝试过先把package.jsons删了,更多错就来来,ctrl z,然后尝试吧browsercraigslist相关文件删了,运行npm run dev

ok 成功拉啊啊啊啊啊啊,觉得真的是蠢到自己了啊啊啊啊

 

 

 

 

 

你可能感兴趣的:(vue)