最近電腦更新到了Windows 11湖雹，安裝 node.js 的時候發(fā)現(xiàn)官網(wǎng)推薦的版本已經(jīng)從 14.x 變?yōu)?16.x ，心想 node.js 版本間兼容性應該不會有太大問題二鳄，于是便安裝了 node.js 16.x 的版本赴涵，然而一切并沒有想象中順利。
安裝完 node 之后便是克隆項目订讼，npm i 安裝依賴髓窜，這時候報錯了：
npm ERR! code 1
npm ERR! path C:\icsd\software\tent-admin\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.13.0 | win32 | x64
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
從報錯的字面內(nèi)容來看，是在安裝 node-sass 時出的錯欺殿，而且原因是 Can't find Python executable "python" （沒有Python環(huán)境寄纵？）
之前安裝依賴只要執(zhí)行 npm i 就行呀，為啥node的項目需要Python環(huán)境了呢祈餐？
搜索之后了解到擂啥，如果 npm 請求 node-sass 文件失敗，會嘗試本地編譯安裝 node-sass 帆阳，這時候需要執(zhí)行 npm install -g windows-build-tools 安裝 windows-build-tools 哺壶。然而，更換了淘寶 npm 鏡像蜒谤，安裝windows-build-tools 之后依舊報一樣的錯誤山宾。
根據(jù) node-sass 官網(wǎng)的說法，不同的 node.js 版本需要安裝不同的 node-sass 版本鳍徽，并且 node-sass 已經(jīng)廢棄资锰，推薦使用 Dart Sass 代替，Dart Sass 在 npm 中的包名為 sass .
查看 package.json 發(fā)現(xiàn)原項目的 node-sass 版本為 4.14.1 , sass-loader 版本為 8.0.2 于是卸載了 node-sass 和 sass-loader 阶祭，并重新安裝：
# 卸載
npm uninstall node-sass sass-loader
#重新安裝
npm i sass-loader sass -S -D
然而绷杜，還是出現(xiàn)報錯：
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: tent-admin@1.8.3
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6...
npm ERR! Could not resolve dependency:
npm ERR! dev sass-loader@"" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@5.62.1
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^5.0.0" from sass-loader@12.3.0
npm ERR! node_modules/sass-loader
npm ERR! dev sass-loader@"" from the root project
從上面的報錯信息來看，最新的 sass-loader@12.3.0 要求 webpack@"^5.0.0"濒募，然而 vue 項目中 webpack 版本為 4.46.0 鞭盟，因此出現(xiàn)沖突」逄辏考慮到 vue 項目是通過 vue-cli 創(chuàng)建的齿诉，并非自行配置的 webpack ，因此考慮通過升級 vue-cli 來更新 webpack.
# 全局安裝 vue/cli
npm install -g @vue/cli
# 更新項目中的vue-cli依賴
vue upgrade
更新后發(fā)現(xiàn)，最新的 vue-cli@4.5.15 依舊是基于 webpack@4.x 版本粤剧，那么只能考慮降一下 sass-loader 的版本了歇竟，根據(jù) vue-cli 的文檔：
Note on webpack 4
When using
webpackversion 4, the default in Vue CLI 4, you need to make sure your loaders are compatible with it. Otherwise you will get errors about confliciting peer dependencies. In this case you can use an older version of the loader that is still compatible withwebpack4.# Sass npm install -D sass-loader@^10 sass
按照官方的說法，安裝 10.x 版本的 sass-loader 后抵恋，所有依賴成功安裝焕议，項目可以正常運行。
本來以為只是升級一下 node 版本馋记，沒想到花了這么長時間踩坑号坡。看到網(wǎng)上大部分解決方案都是降級回 node.js 14梯醒，所有在這里把采坑全經(jīng)過寫下來宽堆，希望對大家有所幫助。
