When everything is set up in my vue environment, the last step npm run dev problem comes, I am going to modify index.js. The port 8080 was changed to other 8099 and it still reported an error. I checked the information for a long time and solved it. Later, I deleted the related files of Browserlist and restarted npm run dev to succeed. I hope it will be adapted to students who are learning vue. The environment can be better solved.
E:\world\vue-demo>npm run dev
> [email protected] dev E:\world\vue-demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
14% building modules 41/44 modules 3 active ...\vue-style-loader\lib\listToStyles.js{ BrowserslistError: E:\world\vue-demo contains both browserslist and package.json with browsers
at E:\world\vue-demo\node_modules\browserslist\node.js:189:15
at eachParent (E:\world\vue-demo\node_modules\browserslist\node.js:43:18)
at Object.findConfig (E:\world\vue-demo\node_modules\browserslist\node.js:172:20)
at Object.loadConfig (E:\world\vue-demo\node_modules\browserslist\node.js:126:37)
at browserslist (E:\world\vue-demo\node_modules\browserslist\index.js:194:22)
at Browsers.parse (E:\world\vue-demo\node_modules\autoprefixer\lib\browsers.js:61:16)
at new Browsers (E:\world\vue-demo\node_modules\autoprefixer\lib\browsers.js:52:30)
at loadPrefixes (E:\world\vue-demo\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
at plugin (E:\world\vue-demo\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
at LazyResult.run (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:204:22)
at E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:197:27
at <anonymous>
name: 'BrowserslistError',
message: 'E:\\world\\vue-demo contains both browserslist and package.json with browsers',
browserslist: true }
15% building modules 42/44 modules 2 active ...\vue-style-loader\lib\listToStyles.js{ BrowserslistError: E:\world\vue-demo contains both browserslist and package.json with browsers
at E:\world\vue-demo\node_modules\browserslist\node.js:189:15
at eachParent (E:\world\vue-demo\node_modules\browserslist\node.js:43:18)
at Object.findConfig (E:\world\vue-demo\node_modules\browserslist\node.js:172:20)
at Object.loadConfig (E:\world\vue-demo\node_modules\browserslist\node.js:126:37)
at browserslist (E:\world\vue-demo\node_modules\browserslist\index.js:194:22)
at Browsers.parse (E:\world\vue-demo\node_modules\autoprefixer\lib\browsers.js:61:16)
at new Browsers (E:\world\vue-demo\node_modules\autoprefixer\lib\browsers.js:52:30)
at loadPrefixes (E:\world\vue-demo\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
at plugin (E:\world\vue-demo\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
at LazyResult.run (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:204:22)
at E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:197:27
at <anonymous>
name: 'BrowserslistError',
message: 'E:\\world\\vue-demo contains both browserslist and package.json with browsers',
browserslist: true }
94% asset optimization
ERROR Failed to compile with 2 errors 11:45:05
error in ./src/App.vue
Module build failed: BrowserslistError: E:\world\vue-demo contains both browserslist and
package.json with browsers
at E:\world\vue-demo\node_modules\browserslist\node.js:189:15
at eachParent (E:\world\vue-demo\node_modules\browserslist\node.js:43:18)
at Object.findConfig (E:\world\vue-demo\node_modules\browserslist\node.js:172:20)
at Object.loadConfig (E:\world\vue-demo\node_modules\browserslist\node.js:126:37)
at browserslist (E:\world\vue-demo\node_modules\browserslist\index.js:194:22)
at Browsers.parse (E:\world\vue-demo\node_modules\autoprefixer\lib\browsers.js:61:16)
at new Browsers (E:\world\vue-demo\node_modules\autoprefixer\lib\browsers.js:52:30)
at loadPrefixes (E:\world\vue-demo\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
at plugin (E:\world\vue-demo\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
at LazyResult.run (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:204:22)
at E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:197:27
at <anonymous>
@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","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:8099 webpack/hot/dev-server ./src/main.js
error in ./src/components/HelloWorld.vue
Module build failed: BrowserslistError: E:\world\vue-demo contains both browserslist and
package.json with browsers
at E:\world\vue-demo\node_modules\browserslist\node.js:189:15
at eachParent (E:\world\vue-demo\node_modules\browserslist\node.js:43:18)
at Object.findConfig (E:\world\vue-demo\node_modules\browserslist\node.js:172:20)
at Object.loadConfig (E:\world\vue-demo\node_modules\browserslist\node.js:126:37)
at browserslist (E:\world\vue-demo\node_modules\browserslist\index.js:194:22)
at Browsers.parse (E:\world\vue-demo\node_modules\autoprefixer\lib\browsers.js:61:16)
at new Browsers (E:\world\vue-demo\node_modules\autoprefixer\lib\browsers.js:52:30)
at loadPrefixes (E:\world\vue-demo\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
at plugin (E:\world\vue-demo\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
at LazyResult.run (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:204:22)
at E:\world\vue-demo\node_modules\postcss\lib\lazy-result.js:197:27
at <anonymous>
@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","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
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8099 webpack/hot/dev-server ./src/main.js
It should be the awareness that browsercraigslist related files and package and json cannot exist at the same time. I hope I can help to correct it..
So then try to delete the related files of browsercraigslist and run npm run dev
I am very happy to solve the problem and hope to solve the problem for more people
You can follow my public account
