背景
公司的項目是vue項目,環境是node@8x版本的,最近我建立react hook的項目,發現至少需要node14才支援,打開官網才發現node都已經到16版本了。失策啊,失策。于是直接更新到最高版本。結果項目直接跑不起來了,看了下日志問題挺多的。我折騰了小1天才弄好。裡面坑不少,最關鍵的是網上好多人的文章太操蛋了,太水了。在這立個貼,和大家分享一下,如果遇到一樣的問題,應該會有很大的幫助。
對了,我更新的是vue2.0的項目,而我vue3.0的項目完全不受影響。原因嘛,我大緻看了下package.json檔案,cli都是最新的,而且沒有node-sass。我想可能是内置了。是以在這再提醒一下,老版本vue-cli建立的項目,應該會遇到和我一樣的問題。
問題和解決方法彙總
1、node-sass 更新,直接導緻項目運作失敗
2、如果用vue-cli建立的項目需要更新,webpack支援到5.0版本,自己搭建的得自己更新了
3、polyfill 棄用了,使用 core-js regenerator-runtime
4、
具體操作
1、首先安裝node最新版本,截至我發帖時間,最新穩定版本為 node16.13.1,
2、更新node-sass,每個版本的node,都會有對應版本的node-sass。而且好像是14之後的版本更新很大,直接不相容了,是以會報錯。這裡我們先去下載下傳node-sass的版本包 點這裡下載下傳 ,下載下傳第一個檔案(下邊有貼圖)。下載下傳成功之後,将這個包,放到你的賬戶下,具體路徑是 C:\Users\你的使用者名\AppData\Roaming\npm-cache\node-sass , 然後建立一個名為 6.0.1 的檔案夾,然後把剛下載下傳的包,複制到這個檔案夾中。我下面都貼圖了。這樣能保證你安裝node-sass依賴的時候不會一直報錯。
3、安裝[email protected],npm i --save [email protected] 如果還是報錯,檢查一下上述幾步是否有漏的,正常不會報錯了。
4、更新vue-cli,以下是正常的更新流程。先試一下,可能會有人更新失敗,再說一個粗暴點的方法,用vue-cli直接建立一個vue2.0的新項目,将老項目node-modules删除,将新項目的node-modules複制過來,然後新項目的package.json的 devDependencies 部分,一條條的替換老項目的,一共三四條。
5、然後保險起見,還是删除整個node-dules,删除package-lock.json,都清空。
6、删除整個node-dules,看一下main.js和package.json 有沒有使用 @babel/polyfill 這個依賴,這個包現在已經廢棄了,換成了 core-js regenerator-runtime 這兩個包,裝一下這兩個依賴,然後修改main.js入口檔案,去掉廢棄的,增加新的2個,下面有代碼貼圖。
7、重新執行 npm install ,安裝所有依賴,重新啟動項目即可

總結
東西其實不多,主要卡在node-sass安裝一直失敗,手動添加了版本包。在一個就是新版本的cli都用的 core-js,需要改項目代碼,否則就會一堆報錯,提示缺各種依賴。這兩塊浪費了我大量的時間,網上一堆沒用的文章,各種粘貼複制、轉載,真的想罵娘。
最後,建議大家搜尋的東西的時候加上 -(CSDN) -(腳本之家) 哈哈,把垃圾資訊都屏蔽掉。基本剩下的都是部落格園、簡書啥的,