如題
前幾天在搭建新的項目的時候,腳手架升級到了 vue-cli4.x 的版本,然後像往常一樣創建了新的項目。可是在安裝依賴的過程中,
node-sass
需要在 github 上下載一個依賴包。一直沒安裝成功,後來改用了 cnpm (淘寶的鏡像)去安裝全部依賴。依賴是裝上了,可是引發了下面的很多問題
vscode 對於 vue 文件無法進行智能提示
沒有智能提示那簡直比白板面試還要難受,甚至亂寫代碼也不會有錯誤警告。這和用記事本寫代碼沒什麼區別,這絕對不能忍!
於是各種找教程,解決沒有智能提示的問題,可是我其他的 vue 項目都是正常,唯獨這個不行。
最後發現,在我使用 npm install
命令之前,vue 智能提示還是好的,就是 cnpm install
後他就不行了!而且可能由於腳手架是最新的 4.x 版本,用 cnpm 安裝的依賴包在運行的時候腳手架總是報錯
幾經折騰和測試,發現就是因爲
cnpm
和vue-cli4.x
的問題。有可能腳手架剛更新,cnpm 沒跟上把。所以必須要用 npm 來安裝各種包才行
用 npm 無法下載 node-sass/phantomjs
沒有 sass
的前端項目是不完整的!最後在 github 的 issues 中發現很多人都和我一樣無法安裝 node-sass github - 安裝 node-sass 的正確姿勢
最後在這個 issues 找到各路大神的答案。自己也總結一下:
1、新建一個 .npmrc 文件
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org
這樣使用 npm install 安裝 node-sass
、electron
和 phantomjs
時都能自動從淘寶源上下載,但是在使用 npm publish 的時候要把 registry 這一行給註釋掉,否則就會發布到淘寶源上去了。
2、每次安裝都單獨 set 一下 cnpm
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
npm install
更多的我就沒仔細統計了。我就採用了第一種方法,多一個文件,一勞永逸!
最後
最後用 npm 安裝的依賴沒問題,node-sass 通過 cnpm 也下載下載可以使用,vscode 也能正常的使用提示和定義的代碼模版,美滋滋~