今天使用vue-cli，明明寫的沒錯，都是vue-cli自動生成的，編譯時怎嘛就會報錯呢？
報錯資訊如下：
瀏覽器端報錯：
Failed to compile. ./src/components/Hi1.vue Module not found:
Error: Can't resolve 'stylus-loader' in 'E:\desktop\vue-review\vuejs\vue-cli\vuecli\src\components' @ ./src/components/Hi1.vue 4:2-310 @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
控制臺報錯：
These dependencies were not found:
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3232a8d1","scoped":true,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hi2.vue in ./src/components/Hi2.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-32249150","scoped":true,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hi1.vue in ./src/components/Hi1.vue
To install them, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3232a8d1","scoped":true,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hi2.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-32249150","scoped":true,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hi1.vue
原來vue-cli在初始化專案時在package.json中沒有引入 stylus和stylus-loader，而我在寫代碼時有用vscode的自動提示功能，然后就導致了錯誤的代碼出現，（其實也不算錯誤，但我還是這么叫它）
<style lang="stylus" scoped>
</style>
就因為代碼提示自動生成的lang="stylus",巧了，vue-cli初始化就沒這方面的包
只要在專案根目錄下運行：npm install stylus stylus-loader --save-dev,在停止vue-cli，重新npm run dev一下就ok了（如果過改了package.json里的dev，可能不是這個命令運行vue-cli）
有時候太圖方便也不好，尤其是在不了解它時o(╥﹏╥)o
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/151137.html
標籤：JavaScript
上一篇：JS DOM創建節點
下一篇：js中的節點遍歷+類陣列物件