vue-cli 脚手架执行npm run build 执行出错的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/a250758092/article/details/80093720

以下是打包的时候报错的地方。执行出错后，CSS都没有打包成功，加粗内容为重要内容

                                     Asset       Size  Chunks             Chunk Names
     static/js/app.83b1ad767b13508e5ebd.js     117 kB       0  [emitted]  app
  static/js/vendor.c664d0fec4ea21f88c6c.js  861 bytes       1  [emitted]  vendor
static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
 static/js/app.83b1ad767b13508e5ebd.js.map     573 kB       0  [emitted]  app

static/js/vendor.c664d0fec4ea21f88c6c.js.map 4.62 kB 1 [emitted] vendor
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 430 bytes [emitted]

ERROR in ./node_modules/[email protected]@extract-text-webpack-plugin/dist/loader.js?{“omit”:1,”remove”:true}!D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@vue-style-loader!D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@css-loader?{“sourceMap”:true}!./node_modules/[email protected]@vue-loader/lib/style-compiler?{“vue”:true,”id”:”data-v-775c1dac”,”scoped”:false,”hasInlineConfig”:false}!./node_modules/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: Error: “extract-text-webpack-plugin” loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.pitch (D:\HBuilder\projects\vue-cli-test\vuetest\[email protected]@extract-text-webpack-plugin\dist\loader.js:57:11)
@ ./src/App.vue 2:2-431
@ ./src/main.js

ERROR in ./node_modules/[email protected]@extract-text-webpack-plugin/dist/loader.js?{“omit”:1,”remove”:true}!D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@vue-style-loader!D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@css-loader?{“sourceMap”:true}!./node_modules/[email protected]@vue-loader/lib/style-compiler?{“vue”:true,”id”:”data-v-133801dc”,”scoped”:true,”hasInlineConfig”:false}!./node_modules/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue
Module build failed: Error: “extract-text-webpack-plugin” loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.pitch (D:\HBuilder\projects\vue-cli-test\vuetest\[email protected]@extract-text-webpack-plugin\dist\loader.js:57:11)
@ ./src/components/HelloWorld.vue 2:2-446
@ ./src/router/index.js
@ ./src/main.js

ERROR in ./node_modules/[email protected]@extract-text-webpack-plugin/dist/loader.js?{“omit”:1,”remove”:true}!D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@vue-style-loader!D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@css-loader?{“sourceMap”:true}!./node_modules/[email protected]@vue-loader/lib/style-compiler?{“vue”:true,”id”:”data-v-1f953e74”,”scoped”:false,”hasInlineConfig”:false}!./node_modules/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!./src/components/home.vue
Module build failed: Error: “extract-text-webpack-plugin” loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.pitch (D:\HBuilder\projects\vue-cli-test\vuetest\[email protected]@extract-text-webpack-plugin\dist\loader.js:57:11)
@ ./src/components/home.vue 2:2-441
@ ./src/router/index.js
@ ./src/main.js

ERROR in ./node_modules/[email protected]@extract-text-webpack-plugin/dist/loader.js?{“omit”:1,”remove”:true}!D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@vue-style-loader!D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@css-loader?{“sourceMap”:true}!./node_modules/[email protected]@vue-loader/lib/style-compiler?{“vue”:true,”id”:”data-v-a0902360”,”scoped”:true,”hasInlineConfig”:false}!./node_modules/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!./src/components/header.vue
Module build failed: Error: “extract-text-webpack-plugin” loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.pitch (D:\HBuilder\projects\vue-cli-test\vuetest\[email protected]@extract-text-webpack-plugin\dist\loader.js:57:11)
@ ./src/components/header.vue 2:2-442
@ D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@babel-loader/lib!./node_modules/[email protected]@vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js

ERROR in ./node_modules/[email protected]@extract-text-webpack-plugin/dist/loader.js?{“omit”:1,”remove”:true}!D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@vue-style-loader!D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@css-loader?{“sourceMap”:true}!./node_modules/[email protected]@vue-loader/lib/style-compiler?{“vue”:true,”id”:”data-v-11d2994c”,”scoped”:true,”hasInlineConfig”:false}!./node_modules/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!./src/components/footer.vue
Module build failed: Error: “extract-text-webpack-plugin” loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.pitch (D:\HBuilder\projects\vue-cli-test\vuetest\[email protected]@extract-text-webpack-plugin\dist\loader.js:57:11)
@ ./src/components/footer.vue 2:2-442
@ D:/Hbuilder/projects/vue-cli-test/vuetest/node_modules/[email protected]@babel-loader/lib!./node_modules/[email protected]@vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js

以上一大堆内容是为了让人能更容易搜到这些东西。。。网上找了N多方法，各种配置的，可能是每个版本都不一致所以出现的内容也不一样，这里的问题并不一定能解决你遇到的问题。

看上面内容，大致都是指向了 [email protected]，可视vue-cli配置应该不会出错，那可能是版本问题，于是我 cnpm install –save-dev [email protected] 将版本降低了2.X版本，打包就成功了。包括CSS样式等。
我发现最近很多问题都是因为版本太高导致的，最笨的方法就是。。如果实在不知道哪里出了原因，可以尝试降低问题所在的某个版本。毕竟错误日志也没有明确指明错误原因，所以要排查有点难