最近電腦更新到了Windows 11，安裝 node.js 的時(shí)候發(fā)現(xiàn)官網(wǎng)推薦的版本已經(jīng)從 14.x 變?yōu)?16.x ，心想 node.js 版本間兼容性應(yīng)該不會(huì)有太大問題，于是便安裝了 node.js 16.x 的版本，然而一切并沒有想象中順利。
安裝完 node 之后便是克隆項(xiàng)目，npm i 安裝依賴，這時(shí)候報(bào)錯(cuò)了：
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.
從報(bào)錯(cuò)的字面內(nèi)容來看，是在安裝 node-sass 時(shí)出的錯(cuò)，而且原因是 Can't find Python executable "python" （沒有Python環(huán)境？）
之前安裝依賴只要執(zhí)行 npm i 就行呀，為啥node的項(xiàng)目需要Python環(huán)境了呢？
搜索之后了解到，如果 npm 請求 node-sass 文件失敗，會(huì)嘗試本地編譯安裝 node-sass ，這時(shí)候需要執(zhí)行 npm install -g windows-build-tools 安裝 windows-build-tools 。然而，更換了淘寶 npm 鏡像，安裝windows-build-tools 之后依舊報(bào)一樣的錯(cuò)誤。
根據(jù) node-sass 官網(wǎng)的說法，不同的 node.js 版本需要安裝不同的 node-sass 版本，并且 node-sass 已經(jīng)廢棄，推薦使用 Dart Sass 代替，Dart Sass 在 npm 中的包名為 sass .
查看 package.json 發(fā)現(xiàn)原項(xiàng)目的 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)報(bào)錯(cuò)：
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
從上面的報(bào)錯(cuò)信息來看，最新的 sass-loader@12.3.0 要求 webpack@"^5.0.0"，然而 vue 項(xiàng)目中 webpack 版本為 4.46.0 ，因此出現(xiàn)沖突。考慮到 vue 項(xiàng)目是通過 vue-cli 創(chuàng)建的，并非自行配置的 webpack ，因此考慮通過升級(jí) vue-cli 來更新 webpack.
# 全局安裝 vue/cli
npm install -g @vue/cli
# 更新項(xiàng)目中的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 后，所有依賴成功安裝，項(xiàng)目可以正常運(yùn)行。
本來以為只是升級(jí)一下 node 版本，沒想到花了這么長時(shí)間踩坑?？吹骄W(wǎng)上大部分解決方案都是降級(jí)回 node.js 14，所有在這里把采坑全經(jīng)過寫下來，希望對(duì)大家有所幫助。
