vue2.x工程安裝遇到的問題解答

LTT1995發表於2020-11-09

建立工程的命令:vue init webpack 檔名(注意,檔名最好是小寫)
建立工程中最好不要安裝ESlint這個命令,即選擇“N”

安裝好工程之後不要著急啟動,接著安裝css的編譯器,一般有三種,不知道自己用的那種css編譯器,可以三種都安裝一下。下面是安裝這三種編譯器的命令:
問題描述:
*!!vue-style-loader!css-loader?{“sourceMap”:true}!../…/…/…/vue-loader/lib/style-compiler/index?{“vue”:true,”id”:”data-v-570115ee”,”scoped”:false,”hasInlineConfig”:false}!../…/…/…/vux-loader/src/after-less-loader.js!less-loader?{“sourceMap”:true}!../…/…/…/vux-loader/src/style-loader.js!../…/…/…/vue-loader/lib/selector?type=styles&index=0!./index.vue
in ./node_modules/vux/src/components/alert/index.vue

解決方案
此類問題一般是缺少相關依賴而導致的,對於本例,仔細看一下報錯提示資訊,抓住關鍵詞,vue-style-loader!css-loader,說明是css解析的時候出了問題。所以,解決方案就要根據情況而定,看你使用的CSS語言是什麼,是 常規的 或者less 或者 sass。

如果是常規的,執行 npm install stylus-loader css-loader style-loader --save-dev 安裝依賴就行。
如果是less的,執行 npm install less less-loader --save-dev 安裝依賴就行。
如果是sass的,執行 npm install sass sass-loader --save-dev 安裝依賴就行。或者($npm intall sass-loader --save ; $npm install node-sass --save)
一般只有在初始化配置的的時候才會出現這個問題,如果是已經完好的專案都會在package.json中已經配好,直接install即可。

!!!前方高能
由於安裝的css的編譯器的版本太高就會出現下面的錯誤提示:
錯誤:Module build failed: Error: Cannot find module ‘node-sass’
Require stack
解決方案:先用npm install --save-dev node-sass,接著執行:npm install sass-loader@7.3.1 –save-dev
注意:如果直接安裝低版本的sass會出現問題,可以執行:npm install –save-dev node-sass
在這裡基本上專案建立成功了,通過:npm run dev 或者 npm run start啟動專案

相關文章