npm缺乏css-loader，/style-compiler，stylus-loader問題，npm沒有權限沒法全局更新問題【已解決】

ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-a5e4f82a","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"import":["~@didi/ada/style/mixins.styl","/home/xiaoju/manhattan-hera-webapp/client/style/base.styl"]}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./client/components/panel_links.vue
Cannot find module 'postcss-import'
@ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-a5e4f82a","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"import":["~@didi/ada/style/mixins.styl","/home/xiaoju/manhattan-hera-webapp/client/style/base.styl"]}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./client/components/panel_links.vue 4:14-454
@ ./client/components/panel_links.vue
@ ./client/app.ts
@ multi ./client/app.ts

以下圖：

 

 

在測試項目的時候，部署前端在啓動前端環境的時候遇到缺乏組件css-loader，/style-compiler，stylus-loader，嘗試了開啓外網，npm的全局安裝，單獨安裝組件( npn install stylus-loader css-loader style-loader style-compiler  --save-dev)後無果，最後在前端大神的指導下，發現是npm的目錄沒有權限，而後找到了破解npm沒法全局安裝下載的最新辦法！親測有效！

 

 

方法一：

更改npm的默認安裝目錄

一、爲全局安裝建立一個安裝目錄   

　　mkdir ~/.npm-global

 

二、配置npm以使用新的目錄路徑

　　npm config set prefix '~/.npm-global'

 

三、打開或建立一個~/.profile文件並添加如下行

　　export PATH=~/.npm-global/bin:$PATH

 

四、而後全局安裝npm便可

　　npm install 

 

五、而後你驚奇的會發現以前全局安裝不下來的東西均可如下載下來了

　　　　在success出現的那一刻，會以爲整個虛擬機都美豔不可方物~

 

方法二：使用節點版本管理器從新安裝（高效適合高手）

一、因爲npm和node.js產品由不一樣的實體管理，所以更新和維護可能變得複雜。此外，Node.js安裝過程將npm安裝在僅具備本地權限的目錄中。當您嘗試全局運行包時，這可能會致使權限錯誤。

爲了解決這兩個問題，許多開發人員選擇使用節點版本管理器或nvm來安裝npm。版本管理器將避免權限錯誤，並將解決更新Node.js和npm的複雜性。

此外，開發人員可使用nvm在多個版本的npm上測試他們的應用程序。nvm使您能夠輕鬆切換npm以及節點版本。這樣能夠更輕鬆地確保您的應用程序適用於大多數用戶，即便他們使用的是其餘版本的npm。若是您決定安裝版本管理器，請使用您選擇的版本管理器的說明來學習如何切換版本，並瞭解如何使用最新版本的npm保持最新。

nvm如何安裝具體請參考

 

https://github.com/creationix/nvm/blob/master/README.md#installation

 

二、安裝完以後驗證登錄系統將提示您輸入用戶名，密碼和電子郵件。請務必使用與在網站上輸入的用戶名徹底相同的方式拼寫您的用戶名，不然您將建立一個新賬戶。

　　npm login

 

三、要測試您是否已成功登陸  

　　npm whoami

 

四、而後嘗試更新你的npm版本

　　npm install npm@next -g

聲明：本文爲博主學習感悟總結，水平有限，若是不當，歡迎指正。若是您認爲還不錯，歡迎轉載。轉載與引用請註明做者及出處。