vue-cli 腳手架執行npm run build 執行出錯的問題
以下是打包的時候報錯的地方。執行出錯後，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?
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樣式等。
我發現最近很多問題都是因為版本太高導致的，最笨的方法就是。。如果實在不知道哪裡出了原因，可以嘗試降低問題所在的某個版本。畢竟錯誤日誌也沒有明確指明錯誤原因，所以要排查有點難