Vue項目中安裝依賴npm?install一直報錯的解決過程
發(fā)現(xiàn)報錯
在 GitHub 上面找了幾個項目,下載下來想執(zhí)行以下,首先根據(jù) README 文檔進行安裝依賴:
npm install
但接下來就一直報錯,報錯信息如下:
npm ERR! code 1 npm ERR! path G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\node-sass npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js npm ERR! Building: F:\nodejs\node.exe G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= npm ERR! gyp info it worked if it ends with ok npm ERR! gyp verb cli [ npm ERR! gyp verb cli 'F:\\nodejs\\node.exe', npm ERR! gyp verb cli 'G:\\前端自學資料\\項目實例\\Vue 項目\\vue2-douban-market-master\\node_modules\\node-gyp\\bin\\node-gyp.js', npm ERR! gyp verb cli 'rebuild', npm ERR! gyp verb cli '--verbose', npm ERR! gyp verb cli '--libsass_ext=', npm ERR! gyp verb cli '--libsass_cflags=', npm ERR! gyp verb cli '--libsass_ldflags=', npm ERR! gyp verb cli '--libsass_library=' npm ERR! gyp verb cli ] npm ERR! gyp info using node-gyp@3.8.0 npm ERR! gyp info using node@18.12.1 | win32 | x64 npm ERR! gyp verb command rebuild [] npm ERR! gyp verb command clean [] npm ERR! gyp verb clean removing "build" directory npm ERR! gyp verb command configure [] npm ERR! gyp verb check python checking for Python executable "python2" in the PATH npm ERR! gyp verb `which` failed Error: not found: python2 npm ERR! gyp verb `which` failed at getNotFoundError (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:207:21) npm ERR! gyp verb `which` failed python2 Error: not found: python2 npm ERR! gyp verb `which` failed at getNotFoundError (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:207:21) { npm ERR! gyp verb `which` failed code: 'ENOENT' npm ERR! gyp verb `which` failed } npm ERR! gyp verb check python checking for Python executable "python" in the PATH npm ERR! gyp verb `which` succeeded python C:\Users\asus\AppData\Local\Programs\Python\Python38\python.EXE npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Command failed: C:\Users\asus\AppData\Local\Programs\Python\Python38\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3]; npm ERR! gyp ERR! stack File "<string>", line 1 npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3]; npm ERR! gyp ERR! stack ^ npm ERR! gyp ERR! stack SyntaxError: invalid syntax npm ERR! gyp ERR! stack npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:412:12) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28) npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1091:16) npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:302:5) npm ERR! gyp ERR! System Windows_NT 10.0.18363 npm ERR! gyp ERR! command "F:\\nodejs\\node.exe" "G:\\前端自學資料\\項目實例\\Vue 項目\\vue2-douban-market-master\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" npm ERR! gyp ERR! cwd G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\node-sass npm ERR! gyp ERR! node -v v18.12.1 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1 npm ERR! A complete log of this run can be found in: npm ERR! F:\nodejs\node_cache\_logs\2023-04-02T15_28_50_593Z-debug-0.log
搜尋了好多種解決方法,依然不行,最后看到一篇博客說是 C盤 User 文件夾中的 .npmrc 文件的問題,于是我嘗試刪除該文件,再次進行 npm install ,此時報錯信息開始發(fā)生變化:
npm notice npm notice New major version of npm available! 8.19.2 -> 9.6.3 npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.3 npm notice Run npm install -g npm@9.6.3 to update! npm notice npm ERR! code 1 npm ERR! path G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\node-sass npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js npm ERR! Building: F:\nodejs\node.exe G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= npm ERR! gyp info it worked if it ends with ok npm ERR! gyp verb cli [ npm ERR! gyp verb cli 'F:\\nodejs\\node.exe', npm ERR! gyp verb cli 'G:\\前端自學資料\\項目實例\\Vue 項目\\vue2-douban-market-master\\node_modules\\node-gyp\\bin\\node-gyp.js', npm ERR! gyp verb cli 'rebuild', npm ERR! gyp verb cli '--verbose', npm ERR! gyp verb cli '--libsass_ext=', npm ERR! gyp verb cli '--libsass_cflags=', npm ERR! gyp verb cli '--libsass_ldflags=', npm ERR! gyp verb cli '--libsass_library=' npm ERR! gyp verb cli ] npm ERR! gyp info using node-gyp@3.8.0 npm ERR! gyp info using node@18.12.1 | win32 | x64 npm ERR! gyp verb command rebuild [] npm ERR! gyp verb command clean [] npm ERR! gyp verb clean removing "build" directory npm ERR! gyp verb command configure [] npm ERR! gyp verb check python checking for Python executable "python2" in the PATH npm ERR! gyp verb `which` failed Error: not found: python2 npm ERR! gyp verb `which` failed at getNotFoundError (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:207:21) npm ERR! gyp verb `which` failed python2 Error: not found: python2 npm ERR! gyp verb `which` failed at getNotFoundError (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:207:21) { npm ERR! gyp verb `which` failed code: 'ENOENT' npm ERR! gyp verb `which` failed } npm ERR! gyp verb check python checking for Python executable "python" in the PATH npm ERR! gyp verb `which` succeeded python C:\Users\asus\AppData\Local\Programs\Python\Python38\python.EXE npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Command failed: C:\Users\asus\AppData\Local\Programs\Python\Python38\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3]; npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3]; npm ERR! gyp ERR! stack ^ npm ERR! gyp ERR! stack SyntaxError: invalid syntax npm ERR! gyp ERR! stack npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:412:12) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28) npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1091:16) npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:302:5) npm ERR! gyp ERR! System Windows_NT 10.0.18363 npm ERR! gyp ERR! command "F:\\nodejs\\node.exe" "G:\\前端自學資料\\項目實例\\Vue 項目\\vue2-douban-market-master\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" npm ERR! gyp ERR! cwd G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\node_modules\node-sass npm ERR! gyp ERR! node -v v18.12.1 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1 npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\asus\AppData\Local\npm-cache\_logs\2023-04-03T02_52_37_898Z-debug-0.log
根據(jù)報錯信息提示,可能是需要將 npm 版本從 8.19.2 升到 9.6.3,于是我繼續(xù)執(zhí)行 npm install -g npm@9.6.3
而此時終于沒有報錯了,證明 npm install 成功了。
PS G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master> npm install -g npm@9.6.3 added 1 package, and audited 238 packages in 8s 18 packages are looking for funding run `npm fund` for details found 0 vulnerabilities PS G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master>
以上我以為解決了 npm install 一直報錯的問題,但接下來,根據(jù) README 文檔要求,運行項目時又出現(xiàn)另一個問題:
PS G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master> npm run dev >> > node build/dev-server.js node:internal/modules/cjs/loader:998 throw err; ^ Error: Cannot find module 'chalk' Require stack: - G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\build\check-versions.js - G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\build\dev-server.js at Module._resolveFilename (node:internal/modules/cjs/loader:995:15) at Module._load (node:internal/modules/cjs/loader:841:27) at Module.require (node:internal/modules/cjs/loader:1061:19) at require (node:internal/modules/cjs/helpers:103:18) at Object.<anonymous> (G:\前端自學資料\項目實例\Vue 項目\vue2-douban-market-master\build\check-versions.js:1:13) at Module._compile (node:internal/modules/cjs/loader:1159:14) at Module._extensions..js (node:internal/modules/cjs/loader:1213:10) at Module.load (node:internal/modules/cjs/loader:1037:32) at Module._load (node:internal/modules/cjs/loader:878:12) at Module.require (node:internal/modules/cjs/loader:1061:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'G:\\前端自學資料\\項目實例\\Vue 項目\\vue2-douban-market-master\\build\\check-versions.js', 'G:\\前端自學資料\\項目實例\\Vue 項目\\vue2-douban-market-master\\build\\dev-server.js' ] } Node.js v18.12.1
根據(jù)報錯信息,它要求安裝 ' chalk ',但我 npm install chalk ,又會報錯,報錯信息和第一次一樣,說到底,依賴就是沒安裝成功。有人說是 node-sass 的問題:
它是一個 native 包,默認情況下每個 node 版本都需要單獨的 node-sass,一般會從 github release 上下載,而我安裝的 node 版本是18.12.1 ,github release 沒有這個版本,所以會轉(zhuǎn)向本地構(gòu)建,本地構(gòu)建需要 windows build tools,簡單說就是需要安裝 visual studio 2019。安裝這個后你的環(huán)境變量里就可以使用 python 等命令,但是明顯你沒有,所以會報錯。
但我電腦上明明安裝了 visual studio 2019 ,不知道為什么還是報錯,根據(jù)我在網(wǎng)上找到了解決辦法
用兩種方法處理依賴:
方式一、替換依賴
卸載舊版本的 node-sass 和 sass-loader,安裝 sass 和 sass-loader,不再使用 node-sass
// 第一步: npm uninstall sass-loader node-sass // 第二步: npm install sass-loader@8.0.2 sass@1.26.5 -D
方式二、安裝指定版本依賴
npm i node-sass@6.0.1 sass-loader@10.2.0
如果使用方法二之后報錯,可能是安裝過程中某些包丟失,嘗試以下方法解決:
npm rebuild node-sass
但我嘗試之后,又報出下面的錯誤
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: elm@2.0.1
npm ERR! Found: webpack@1.15.0
npm ERR! node_modules/webpack
npm ERR! dev webpack@"^1.13.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.36.0 || ^5.0.0" from sass-loader@10.2.0
npm ERR! node_modules/sass-loader
npm ERR! dev sass-loader@"10.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\asus\AppData\Local\npm-cache\_logs\2023-04-03T08_07_16_823Z-eresolve-report.txtnpm ERR! A complete log of this run can be found in: C:\Users\asus\AppData\Local\npm-cache\_logs\2023-04-03T08_07_16_823Z-debug-0.log
新的問題又產(chǎn)生,沒辦法,再找解決方法:
根據(jù)其報錯提示,我們?nèi)?zhí)行 npm install --force 或者 npm install --legacy-peer-deps,
但。。。。。。好像一進行 npm install ,馬上又回到最初的那個報錯,死循環(huán)了,沒有找到關(guān)鍵問題,歸根結(jié)底還是依賴沒能安裝成功的緣故。最后,我又去翻看了一下 README 文檔,發(fā)現(xiàn)該項目是在 nodejs 6.10.0 下開發(fā)的:
而我使用的是 nodejs 18.12.1 版本,初步判斷就是由于我使用的版本太新,超出這個項目所需的要求,使得 npm 的包出現(xiàn)問題,一直報錯,而這里,我又看到 README 文檔 說建議使用 yarn 下載依賴,我果斷嘗試,最后完美解決了項目下載依賴并運行會報錯等系列問題?!舅哉f還是得注意 README 文檔的相關(guān)信息】
至于怎么解決 npm 包的問題導致無法加載依賴和運行項目 npm run dev 會報錯的問題,暫時認為需要換成對應的 node.js 版本,但頻繁換 node.js 版本也很不方便,這時可以使用 nvm,一個nodejs 版本管理工具!來進行版本是使用控制。
下面說說下載安裝 nvm 的步驟:
【寫在前面】首先要注意,先把電腦上的 nodejs 卸載干凈,否則后面會出現(xiàn)一些問題。
1. 去官網(wǎng)下載并安裝:https://nvm.uihtm.com/
【注意】選擇 nvm 安裝路徑時文件夾名不要出現(xiàn)中文和空格
2. 以管理員身份運行并輸入 nvm ,出現(xiàn)下圖信息說明安裝成功
3. nvm 命令
常見的 nvm 命令
1. nvm -v // 查看 nvm 版本
- nvm -version // 顯示 nvm 版本及其信息
2. nvm list //顯示版本列表
- nvm list :顯示已安裝的版本(同 nvm list installed
- nvm list installed:顯示已安裝的版本
- nvm list available:顯示所有可以下載的版本
3. nvm install //安裝指定版本node.js
- nvm install 16.5.0:安裝 16.5.0 版本的 node.js
- nvm install latest:安裝最新版本
4. nvm use // 使用指定版本node
- nvm use 16.5.0: 切換到 16.5.0 版本的 node.js
- --lts // 自動切換到長期支持版本
- --lts=<LTS name> // 自動切換到指定名稱的 node 長期支持版本
5. nvm uninstall <version> // 卸載指定版本 node
- nvm uninstall 14.5.0:卸載到 14.5.0 版本的 node.js
- nvm uninstall --lts // 卸載長期支持版本的node
- nvm uninstall --lts=<LTS name> // 卸載一個指定名稱的長期支持版本的node
6. nvm --help //顯示命令行幫助信息
【注】在運行 nvm install 的時候,有可能會出現(xiàn)無權(quán)限安裝的問題,請以管理員身份運行 cmd
其他的命令
nvm deactivate // 取消當前nvm命令行效果
1. nvm 查看 node 版本
- nvm current // 查看當前使用的 node 版本
- nvm ls // 查看所有本地可用的 node 版本
- nvm ls <version> // 參看指定版本
- nvm ls-remote // 查看所有可用遠程版本
- --lts // 查看所有長期支持版本
- nvm ls-remote <version> // 參看所有 node 的指定遠程版本
- --lts // 查看所有 node 長期支持版本
- --lts=<LTS name> // 僅查看指定名稱的長期支持版本
2. nvm 版本別名
- nvm alias [<pattern>] // 顯示所有以 <pattern> 開頭的版本別名
- nvm alias <name> <version> // 給版本 <version> 設(shè)置一個別名
- nvm unalias <name> // 刪除 <name> 的版本別名
3. nvm 和 npm
- nvm install-latest-npm // 在當前 node 版本中,將 npm 升級到最新版
- nvm reinstall-packages <version> // 在全局重新安裝 npm,從 <version> 版本到當前版本
4. npm which 顯示安裝路徑
npm which [current | <version>] // 顯示已安裝 node 的安裝路徑。
5. nvm緩存
- nvm cache dir // 顯示 nvm 的緩存目錄
- nvm cache clear // 清除 nvm 的緩存目錄
6. nvm 運行 node
- nvm exec [--silent] [version] [<command>] // 在<version> 運行命令 <command>
- nvm exec 4.8.3 node app.js // Run `node app.js` with the PATH pointing to node 4.8.3
- nvm run [--silent] [version] [<args>] // 在<version>以參數(shù)<args>運行node --
- nvm run 6.10.3 app.js //Run app.js using node 6.10.3
7. 設(shè)置鏡像
- nvm node_mirror [url] :設(shè)置 node 鏡像。默認是 https://nodejs.org/dist/。如果不寫 url,則使用默認 url。設(shè)置后可至安裝目錄 settings.txt 文件查看,也可直接在該文件操作。
- nvm npm_mirror [url] :設(shè)置 npm 鏡像。https://github.com/npm/cli/archive/。如果不寫 url,則使用默認 url。設(shè)置后可至安裝目錄 settings.txt 文件查看,也可直接在該文件操作。
8. 版本管理
nvm on
:開啟 node.js 版本管理。nvm off
:關(guān)閉 node.js 版本管理。
總結(jié)
到此這篇關(guān)于Vue項目中安裝依賴npm install一直報錯的解決過程的文章就介紹到這了,更多相關(guān)Vue安裝依賴npm install報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue多層數(shù)據(jù)結(jié)構(gòu)響應式失效,視圖更新失敗問題
這篇文章主要介紹了Vue多層數(shù)據(jù)結(jié)構(gòu)響應式失效,視圖更新失敗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02vue-baidu-map 進入頁面自動定位的解決方案(推薦)
這篇文章主要介紹了vue-baidu-map 進入頁面自動定位的解決方案,需要的朋友可以參考下2018-04-04在axios中使用params傳參的時候傳入數(shù)組的方法
今天小編就為大家分享一篇在axios中使用params傳參的時候傳入數(shù)組的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09VUE的history模式下除了index外其他路由404報錯解決辦法
在本篇文章里小編給大家分享的是關(guān)于VUE的history模式下除了index外其他路由404報錯解決辦法,對此有需要的朋友們可以學習下。2019-08-08